Создание директивы атрибута

Директива это класс с декоратором @Directive. В Angular5 есть несколько видов директив. Директивы атрибута позволяют изменять внешний вид и поведение элементов, компонентов или других директив. Рассмотрим директиву атрибута подробнее.

Создадим файл \app\basic-highlight\basic-highlight.directive.ts:

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

@Directive({
  selector: '[appBasicHighLight]'
})
export class BasicHighlightDirective implements OnInit {

  constructor(private elementRef: ElementRef) {
  }

  ngOnInit() {
    this.elementRef.nativeElement.style.backgroundColor = "green";
  }

}
 

Директиву нужно подключить в файле \app\app.module.ts:

  
//...
import { BasicHighlightDirective } from './basic-highlight/basic-highlight.directive';

@NgModule({
  declarations: [
    //...
    BasicHighlightDirective
  ],
  //...
})
  

Теперь директиву атрибута можно использовать в шаблонах:

 
<p appBasicHighLight>
  basic highlight style
</p>
  

Создание из командной строки

Процесс создания файлов директив можно автоматизировать с помощью команды ng generate directive #name#. Или сокращенного варианта ng g d #name#

Renderer2

Использование класса Renderer2 для манипуляций с DOM:

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

@Directive({
  selector: '[appBetterHilight]'
})
export class BetterHilightDirective implements OnInit {

  constructor(private elRef: ElementRef, private renderer: Renderer2) { }

  ngOnInit() {
    this.renderer.setStyle(this.elRef.nativeElement, 'color', 'red');
  }

}