textdirective

Angular Textbox for web applications. Easy to integrate and use. It can be bind to any custom data source.

Getting Started

Features

• Textbox to accept number pattern only
• Textbox to accept string pattern only
• Textbox to accept alphanumeric pattern only
• Textbox to accept user-defined pattern only
• Capitalised first letter of that textbox
• Remove all whitespaces

Installation

npm i textdirective


```ts
import { TextboxModule } from './textbox/textbox.module';
// ...

@NgModule({
  imports: [
    TextboxModule
    // ...
  ]
  // ...
})
export class AppModule {}

Usage

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '/^[0-9]*$/';

}

<appNg2Editabletext [(ngModel)]="abc"  [IsNumberOnly]="true" [FirstCharUpper]="true" [pattern]="true" [IsAlphaNumeric]=""></appNg2Editabletext>

options

| options | Type | Description | Default Value | | :----------------------- | :--------- | :----------------------------------------------------------------------------------------------------------- | :-------------------------| | IsNumberOnly | Boolean | If set true then textbox accepts only number type value and if false it accept string only | true |
| FirstCharUpper | Boolean | If set true then the first letter of textbox will be capitalised | true |
| pattern| Boolean | if set true then you can use your pattern given by you(user) | true |
| IsAlphaNumeric | String | If set true then the first letter of textbox will be capitalised | 'name' | |

Using

• [(ngModel)] - If you use [(ngModel)] then you can remove all whitespaces of your textbox and capitalised the first letter of that textbox

Notice

• You can use either pattern parameter true or IsAlphaNumeric true or IsNumberOnly true, if you don't want to add any parameter then textbox accepts only string input

Run locally

• Clone the repository or downlod the .zip,.tar files.
• Run npm install
• Run ng serve for a dev server
• Navigate to http://localhost:4200/

Library Build / NPM Package

Run yarn build:lib to build the library and generate an NPM package. The build artifacts will be stored in the dist-lib/ folder.

Running unit tests

Run yarn test to execute the unit tests.

Development

This project was generated with Angular CLI version 1.7.1.

Contributions

Contributions are welcome, please open an issue and preferrably file a pull request.

Opening Issue

Please share sample code using codesandbox.com or stackblitz.com to help me re-produce the issue.

License

MIT License.