Angular uses the concept of directive to change the appearance or behavior of an element in the HTML. Here we will be learning about directives.
Your first directive
To create your first directive, you need to use the Angular CLI with the command ng generate directive test-name
or in its short form ng g d test-name
.
As with services and pipelines, the CLI command will create a .ts
file with your directive code and a .spec.ts
file for their respective unit tests.
The CLI will also update the app.module.ts
file by importing the directive into the declarations[]
. Don't forget to make sure it is being imported correctly. Otherwise, Angular will not recognize the directive.
The default directives look like this:
import { Directive } from '@angular/core'; @Directive({ selector: '[appTestName]'})export class TestNameDirective { constructor() { } }
They use the @Directive()
decorator that contains the name you will use in the HTML to use the directive.
Manipulating styles
In the directives, you can capture the HTML element by importing the ElementRef
service and thus be able to change the styles of that element:
import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appChangeColor]'})export class ChangeColorDirective { constructor( private element: ElementRef ) { this.element.nativeElement.style.color = 'blue'; } } }
<div> <p appChangeColor>Textcolor blue.</p></div>
Listening to events
Another possibility offered by directives, is listening for events. Making use of the @HostListener()
decorator and imported from @angular/core
you can execute a function every time a click, hover, scroll or any other event occurs.
import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appChangeColor]'})export class ChangeColorDirective { @HostListener('mouseenter') onMouseEnter() { this.element.nativeElement.style.color = 'blue'; } @HostListener('mouseleave') onMouseLeave() { this.element.nativeElement.style.color = ''; } constructor( private element: ElementRef ) { } } }
<div> <p appChangeColor>Textcolored blue when hovering.</p></div>
Passing data to a directive
Finally, if you have a need for your directive to receive some kind of value, it's best to rely on the decorator you already know @Input()
.
import { Directive, Input, ElementRef } from '@angular/core'; @Directive({ selector: '[appChangeColor]'})export class ChangeColorDirective { @Input() color!: string; constructor( private element: ElementRef ) { this.element.nativeElement.style.color = this.color; } } }
<div> <p appChangeColor [color]="'blue'">Textcolor blue.</p></div><div> <div> <p appChangeColor [color]="'red'">Textcolor red.</p></div><div> <div> <p appChangeColor [color]="'green'">Textcolor green.</p></div><div> <p
It can be somewhat difficult if you're just starting out with Angular to imagine a good use for a directive of your own. For now, it's important to know they exist so you can implement them when that time comes.
View project source code
Contribution created with contributions from Kevin Fiorentino.
Want to see more contributions, questions and answers from the community?