Angular Directives
Angular directives are used to extend the HTML's power by giving it new syntax.
Directives can Extend, change or Modify the Behavior of the DOM Elements.
Types of Directives
1. Structural Directives
2. Attribute Directives
3. Component Directives
1. Structural Directives:
Structural Directive is associated with manipulating the DOM elements. You will find an asterisk (*) prefix before the directive. We can take *ngFor and *ngIf ,*ngSwitch as examples here.
2. Attribute Directives:
ng generate directive highlight
3. Component Directives:
[styles]
[class]
Attribute Directives examples:
1 example : Phone number mask 9898-555-545
import { Directive, HostListener } from "@angular/core";
import { NgControl } from "@angular/forms";
@Directive({
selector: '[formControlName][phoneMask]'
})
export class PhoneMaskDirective {
constructor(public ngControl: NgControl) { }
@HostListener("input", ["$event"])
onKeyDown(event: KeyboardEvent) {
const input = event.target as HTMLInputElement;
let trimmed = input.value.replace(/\s+/g, "");
if (trimmed.length > 12) {
trimmed = trimmed.substr(0, 12);
}
trimmed = trimmed.replace(/-/g, "");
let numbers = [];
numbers.push(trimmed.substr(0, 3));
if (trimmed.substr(3, 3) !== "") numbers.push(trimmed.substr(3, 3));
if (trimmed.substr(6, 4) != "") numbers.push(trimmed.substr(6, 4));
input.value = numbers.join("-");
}
}
2.Example ZIP Code 56845
import { Directive, HostListener } from '@angular/core';
import { NgControl } from "@angular/forms";
@Directive({
selector: '[formControlName][appZipcode]'
})
export class ZipcodeDirective {
constructor(public ngControl: NgControl) {}
@HostListener("input", ["$event"])
onKeyDown(event: KeyboardEvent) {
const input = event.target as HTMLInputElement;
let trimmed = input.value.replace(/\s+/g, "");
if (trimmed.length > 10) {
trimmed = trimmed.substr(0, 10);
}
trimmed = trimmed.replace(/-/g, "");
let numbers = [];
numbers.push(trimmed.substr(0, 5));
if (trimmed.substr(5, 4) !== "") numbers.push(trimmed.substr(5, 4));
input.value = numbers.join("-");
}
}
3. Two Digit Decima Number
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appTwoDigitDecimaNumber]'
})
export class TwoDigitDecimaNumberDirective {
private regex: RegExp = new RegExp(/^\d*\.?\d{0,2}$/g);
private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', '-', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];
constructor(private el: ElementRef) {
}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
// Allow Backspace, tab, end, and home keys
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
let current: string = this.el.nativeElement.value;
const position = this.el.nativeElement.selectionStart;
const next: string = [current.slice(0, position), event.key == 'Decimal' ? '.' : event.key, current.slice(position)].join('');
if (next && !String(next).match(this.regex)) {
event.preventDefault();
}
}
}
Numbers Only:
import { Directive, ElementRef, HostListener, Input, Output, EventEmitter } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: 'input[numbersOnly]'
})
export class NumberDirective {
@Output() valueChange = new EventEmitter()
constructor(private el: NgControl) { }
@HostListener('input', ['$event.target.value'])
onInput(value: string) {
// NOTE: use NgControl patchValue to prevent the issue on validation
this.el.control?.patchValue(value.replace(/[^0-9]/g, ''));
}
}
Decimal Number:
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[decimaNumber]'
})
export class DecimaNumberDirective {
private regex: RegExp = new RegExp(/^\d*\.?\d{0,3}$/g);
private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', '-', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];
constructor(private el: ElementRef) {
}
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
// Allow Backspace, tab, end, and home keys
if (this.specialKeys.indexOf(event.key) !== -1) {
return;
}
let current: string = this.el.nativeElement.value;
const position = this.el.nativeElement.selectionStart;
const next: string = [current.slice(0, position), event.key == 'Decimal' ? '.' : event.key, current.slice(position)].join('');
if (next && !String(next).match(this.regex)) {
event.preventDefault();
}
}
}
Phone Number:
import { Directive, HostListener } from "@angular/core";
import { NgControl } from "@angular/forms";
@Directive({
selector: "[formControlName][phoneNumber]"
})
export class PhoneNumberDirective {
constructor(public ngControl: NgControl) {}
// or simplier add dashes US pattern mode
@HostListener("input", ["$event"])
onKeyDown(event: KeyboardEvent) {
const input = event.target as HTMLInputElement;
let trimmed = input.value.replace(/\s+/g, "");
if (trimmed.length > 12) {
trimmed = trimmed.substr(0, 12);
}
trimmed = trimmed.replace(/-/g, "");
let numbers = [];
numbers.push(trimmed.substr(0, 3));
if (trimmed.substr(3, 3) !== "") numbers.push(trimmed.substr(3, 3));
if (trimmed.substr(6, 4) != "") numbers.push(trimmed.substr(6, 4));
input.value = numbers.join("-");
}
}
Trim
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appTrim]',
})
export class TrimDirective {
constructor(
private el: ElementRef
) { }
@HostListener('blur') onBlur() {
const value = this.el.nativeElement.value;
if (value) {
this.el.nativeElement.value = value.trim();
}
}
}
Social Security:
import { Directive, HostListener } from "@angular/core";
import { NgControl } from "@angular/forms";
@Directive({
selector: "[formControlName][socialSecurity]"
})
export class SocialSecurityDirective {
constructor(public ngControl: NgControl) {}
// or simplier add dashes US pattern mode
@HostListener("input", ["$event"])
onKeyDown(event: KeyboardEvent) {
const input = event.target as HTMLInputElement;
let trimmed = input.value.replace(/\s+/g, "");
if (trimmed.length > 11) {
trimmed = trimmed.substr(0, 11);
}
trimmed = trimmed.replace(/-/g, "");
let numbers = [];
numbers.push(trimmed.substr(0, 3));
if (trimmed.substr(3, 2) !== "") numbers.push(trimmed.substr(3, 2));
if (trimmed.substr(5, 4) != "") numbers.push(trimmed.substr(5, 4));
input.value = numbers.join("-");
}
}
