Створення Attribute Directives

Атрибутивні директиви змінюють поведінку елемента, до якого вони застосовуються. Наприклад, директива ngClass дозволяє встановити для елемента клас CSS. При цьому сама директива застосовується до елементу у вигляді атрибуту.

<p [ngClass]="{'verdana-font': true}">

Створення власних атрибутивних директив.

cmd

$ ng g directive highlight

highlight.directive.ts

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

app.module.ts

// ...

@NgModule({
  // ...
  declarations: [
    // ...
    HighlightDirective
  ]
})
export class AppModule { }