How it works: Angular Directives

Angular directives are custom attributes for elements. It allows you to manipulate the element.

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

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}

Usage:

This <span appHighlight>is</span> nice!

You can also manipulate the element during events such as mouseenter by using @HostListener decorator.

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

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
constructor(private el: ElementRef) { }

@HostListener('mouseenter')
onMouseEnter() {
this.highlight('yellow');
}

@HostListener('mouseleave')
onMouseLeave() {
this.highlight(null);
}

private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}

You can pass the color as a parameter by adding @Input color: string field. Note that if you have multiple directives and same field names (color on both for example) they are going to use the same value.

<span appHighlight color="green">green highlight</span>

You can make it shorter by binding the color on the directive and aliasing the property, like this:

@Input('appHighlight')
color: string;

And use:

<span [appHighlight]="green">green highlight</span>

Complete code (tslint default config doesn’t like input renaming):

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

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
@Input('appHighlight') // tslint:disable-line no-input-rename
color: string;

constructor(private el: ElementRef) { }

@HostListener('mouseenter')
onMouseEnter() {
this.highlight(this.color || 'red');
}

@HostListener('mouseleave')
onMouseLeave() {
this.highlight(null);
}

private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}

Angular How it works series

Check out other posts of this series, Angular How it works.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade