Angular Decimal Validation

Introduction Angular Directives

Directives are instructions to the DOM.
There are three types of directives:
  1. Component 
  2. Structural directive
  3. Attribute directive
Directives with a template
Structural Directive
Change the DOM layout by adding and removing DOM elements.(leading with *).
Attribute Directive
Change the appearance or behavior of an element 

List of Angular Directives

  • *ngIf
    The NgIf directive is used when you want to display or remove an element based on a condition. If the condition is false the element the directive is attached to will be removed from the DOM.

    The syntax is: *ngIf="<condition>"

  • *ngFor
    Its point is to repeat a given HTML template once for each value in an array, each time passing it the array value as context for string interpolation or binding.

    Syntax: <li *ngFor="let user of listuser">

  • ngClass
    The NgClass directive allows you to set the CSS class dynamically for a DOM element.

  • ngStyle
    The NgStyle directive lets you set a given DOM elements style properties.

  • ngSwitch
    This directive allows us to render different elements depending on a given condition.
Step 1
Let's create an Angular project using the following npm command,
Angular Decimal Validaion
Step 2
Open the created project in the Visual Studio code and generate directive by using below command,
Angular Decimal Validaion 
Step 3
Open the created decimalvalidation.directive.ts,
Angular Decimal Validaion
Selector tells Angular to create and insert an instance of this component where it finds <product-desc> tag. For example, if an app’s HTML contains <product-desc></product-desc>, then Angular inserts an instance of the Product Description view between those tags. 
Your HTML just uses it as Attribute for an element
Step 4
Let's open the decimalvalidation.directive.ts Use the below regular expression code for Decimal Validation, 
  1. import {  
  2.     Directive,  
  3.     ElementRef,  
  4.     HostListener  
  5. } from '@angular/core';  
  6. @Directive({  
  7.     selector: '[appDecimalvaliation]'  
  8. })  
  9. export class DecimalvalidaitonDirective {  
  10.     private regex: RegExp = new RegExp(/^\d*\.?\d{0,2}$/g);  
  11.     private specialKeys: Array < string > = ['Backspace''Tab''End''Home''-''ArrowLeft''ArrowRight''Del''Delete'];  
  12.     constructor(private el: ElementRef) {}  
  13.     @HostListener('keydown', ['$event'])  
  14.     onKeyDown(event: KeyboardEvent) {  
  15.         // Allow Backspace, tab, end, and home keys     
  16.         if (this.specialKeys.indexOf(event.key) !== -1) {  
  17.             return;  
  18.         }  
  19.         let current: string = this.el.nativeElement.value;  
  20.         const position = this.el.nativeElement.selectionStart;  
  21.         const next: string = [current.slice(0, position), event.key == 'Decimal' ? '.' : event.key, current.slice(position)].join('');  
  22.         if (next && !String(next).match(this.regex)) {  
  23.             event.preventDefault();  
  24.         }  
  25.     }  
  26. }  
Regular Expression
A regular expression is an object that describes a pattern of characters. Regular expressions are used to perform pattern-matching and "search-and-replace" functions on text.
It is a service, which gives us access to the DOM Object. The ElementRef gives the directive direct access to the DOM element upon which it’s attached.
This decorator allows us to subscribe to the events which is raised from the DOM element. Listen to the event occurs on the element and act accordingly. This is a function decorator that accepts an event name. When that event gets fired on the host element it calls the associated function.
The keydown event is fired when a key is pressed. Unlike the keypress event, the keydown event is fired for all keys, regardless of whether they produce a character value.
Step 6
And finally open the app.component.html file add the attribute name.


In this article, we discussed how to validate decimal pattern using directive.