This is a custom input for different input type can handle many different type and supports both FormsModule and ReactiveFormsModule
npm install dv-custom-inputdv-custom-input is built for Angular >=8.0.0.It doesn't use jQuery.
Get Started ::
1. Run npm i dv-custom-input or ng add dvy-custom-input.
2. Import FormsModule and ReactiveFormsModule in your app.module.ts file.
3. Add DvInputCustomModule to app NgModule, make sure you have BrowserAnimationsModule as well.
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
CommonModule,
BrowserAnimationsModule, // required animations module
DvInputCustomModule, // DvInputModule added
],
bootstrap: [App],
declarations: [App],
})
class MainModule {}
4. Inside component.ts file
import {Component} from '@angular/core';
@Component({
selector: 'my-component',
template:
})
export class MyComponent {
}
5. API
TYPENAMES:[number,string,text,phone]
-[number] -- Only the numbers can be entered.
-[string] -- Only string values can be entered.
-[text] -- Supports all both string and number.
-[phone] -- Supports custom style phone number.
6. Available options based on input options
Property : Default : Description
textValue : empty-string : by-default is empty but can be set to any value depending upon type mentioned.
className : empty : by-default is empty but can be set to any value.
placeholderText : 'Enter Something!..' : by-default has value but can be set to any value.
firstSeparator : '3' - only for type phone (only int-values) : by-default it has first separator after 3 digits
secondSeparator : '7' - only for type phone (only int-values) : by-default it has second separator after 7 digits
Run ng generate component component-name --project dv-input-custom to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project dv-input-custom.
> Note: Don't forget to add --project dv-input-custom or else it will be added to the default project in your angular.json file.
Run ng test dv-input-custom to execute the unit tests via Karma.
To get more help on the Angular CLI use go check out the Divyanshu