How to create Custom Directive.

Question

Hi I have textbox with numeric and text data type. I want that user should only enter numeric values or dot in numeric boxes. In text boxes user can enter only alphabets using custom directive. Thanks

Jignesh Kumar · Answer

Hello Ramco, You can follow the below steps to create a custom directive and use in the angular project, 1. Create directive typescript ng generate directive alphanumeric 2. Create custom directory logic import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appAlphanumeric]' }) export class AlphanumericDirective { private regex: RegExp = new RegExp(/^[a-zA-Z0-9]*$/); private specialKeys: Array = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Delete']; constructor(private el: ElementRef) { } @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) { // Allow: navigation keys, backspace, delete, tab, escape, enter, etc. if (this.specialKeys.indexOf(event.key) !== -1) { return; } // Do not allow if the key pressed doesn't match the regex const current: string = this.el.nativeElement.value; const next: string = current.concat(event.key); if (next && !String(next).match(this.regex)) { event.preventDefault(); } } } 3. use for text input, 4. Add to the module import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { AlphanumericDirective } from './alphanumeric.directive'; @NgModule({ declarations: [ AppComponent, AlphanumericDirective ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Jayraj Chhaya · Answer

To achieve this functionality, you can create custom directives in Angular. Below is an example of how you can create directives for numeric and text input validation: import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appNumeric]' }) export class NumericDirective { constructor(private el: ElementRef) {} @HostListener('input', ['$event']) onInput(event: KeyboardEvent) { const input = this.el.nativeElement.value; this.el.nativeElement.value = input.replace(/[^0-9.]/g, ''); } } Text Directive import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appText]' }) export class TextDirective { constructor(private el: ElementRef) {} @HostListener('input', ['$event']) onInput(event: KeyboardEvent) { const input = this.el.nativeElement.value; this.el.nativeElement.value = input.replace(/[^a-zA-Z]/g, ''); } } In your HTML template, apply the directives accordingly:

Naimish Makwana · Answer

Sure, you can create custom directives in Angular to restrict the input in textboxes. Here’s how you can do it: import { Directive, ElementRef, HostListener } from '@angular/core'; // Directive for numeric input @Directive({ selector: '[numericInput]' }) export class NumericInputDirective { private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g); private specialKeys: Array = ['Backspace', 'Tab', 'End', 'Home', '-']; constructor(private el: ElementRef) { } @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) { if (this.specialKeys.indexOf(event.key) !== -1) { return; } let current: string = this.el.nativeElement.value; let next: string = current.concat(event.key); if (next && !String(next).match(this.regex)) { event.preventDefault(); } } } // Directive for alphabetic input @Directive({ selector: '[alphaInput]' }) export class AlphaInputDirective { private regex: RegExp = new RegExp(/^[a-zA-Z]*$/g); private specialKeys: Array = ['Backspace', 'Tab', 'End', 'Home', '-']; constructor(private el: ElementRef) { } @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) { if (this.specialKeys.indexOf(event.key) !== -1) { return; } let current: string = this.el.nativeElement.value; let next: string = current.concat(event.key); if (next && !String(next).match(this.regex)) { event.preventDefault(); } } } You can use these directives in your HTML like this: The numericInput directive will only allow numeric input and dots, and the alphaInput directive will only allow alphabetic input. Please replace '@angular/core' with the correct import path in your project. Also, don’t forget to declare these directives in your module. Thanks

Rajendra Taradale · Answer

You can explore - https://www.c-sharpcorner.com/blogs/angular-reusable-loader-directive

How to create Custom Directive.

Answers (4)