Create Custom Attribute directive in Angular Framework

Create a Custom Attribute in Angular Framework:-

A custom attribute is used to create our own attribute type directive in an angular Framework.

If we want to create common features in the angular application which will be implemented into multiple dom element then we can use the Attribute directive similar to the predefine attribute directive ngClass and ngStyle.


Step for Custom directive, First use the CLI approach to create a custom directive

ng g directive directive name

It will create two different files .ts and spec.ts and its reference will be by default added on app.module.ts file in import and declaration decorator.

now we are creating ChangeText Directive then

Step1st:-  ng g directive changeText

Step2nd:-  Write Code on change-text-directive.ts

import { Directive,ElementRef } from '@angular/core';

@Directive({
  selector: '[appChangeText]'
})
export class ChangeTextDirective {

  constructor(Element: ElementRef) {
     Element.nativeElement.innerText='welcome in shiva concept solution';
  }

}

Use directive in any component HTML file 

<span appChangeText>Welcome in Angular JS</span>