Java, .NET, PHP, PYTHON, ANGULAR, .NET, ML, Data Scince, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

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>








Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post