Атрибутивные директивы меняют поведение элемента, к которому они применяются. Например, директива ngClass позволяет установить для элемента класс CSS. При этом сама директива применяется к элементу в виде атрибута:

<div [ngClass]="{verdanaFont:true}">

И при необходимости мы можем сами создавать какие-то свои директивы атрибутов для каких-то определенных целей. Итак, создадим свою директиву. Добавим в папку src/app новый файл, который назовем bold.directive.ts:

ng g d bold

Определим в файле bold.directive.ts следующий код:

import {Directive, ElementRef} from '@angular/core';
 
@Directive({
    selector: '[bold]'
})
export class BoldDirective{
 
    constructor(private elementRef: ElementRef){
 
        this.elementRef.nativeElement.style.fontWeight = "bold";
    }
}

Директива - это обычный класс на TS, к которому применяется декоратор Directive, соответственно нам надо импортировать эту директиву из «angular/core». Кроме того, здесь импортируется класс «ElementRef». Он представляет ссылку на элемент, к которому будет применяться директива.

При применении декоратора @Directive необходимо определить селектор CSS, с которым будет ассоциирована директива. Селектор CSS для атрибута должен определяться в квадратных скобках. В данном случае в качестве селектора выступает [bold].

Сам декоратор @Directive применяется к классу, который называется BoldDirective. Это собственно и есть класс директивы, который определяет ее логику.

Для получения элемента, к которому применяется данная директива, в классе определен конструктор, имеющий один параметр: private elementRef: ElementRef. Через этот параметр Angular будет передавать или инжектировать тот элемент из шаблона, в котором применяется директива.

Поскольку параметр определен с ключевым словом private, то для него будет создаваться одноименная приватная переменная, через которую мы можем получить объект ElementRef и произвести с ним какие-либо манипуляции. В частности, здесь идет обращение к вложенному свойству nativeElement, через которое у элемента устанавливается жирный шрифт:

this.elementRef.nativeElement.style.fontWeight = "bold";

Теперь возьмем код главного компонента и применим директиву:

import { Component} from '@angular/core';
 
@Component({
    selector: 'my-app',
    template: `<div>
                  <p bold>Hello Angular</p>
                  <p>Angular представляет модульную архитектуру приложения</p>
               </div>`
})
export class AppComponent {}

Здесь определено два параграфа, и к первому из них применяется директива. Поскольку в коде директивы был определен селектор «[bold]», то чтобы ее применить, в коде элемента применяется данный селектор.

Но сама по себе директива не заработает. Нам еще надо ее подключить в модуле приложения - классе AppModule:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { BoldDirective} from './bold.directive';
 
@NgModule({
    imports:      [ BrowserModule],
    declarations: [ AppComponent, BoldDirective],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

Как и компоненты, директивы также надо сначала импортировать из файла, где они объявлены:

import { BoldDirective} from './bold.directive';

Затем она добавляется в секцию declarations:

declarations: [ AppComponent, BoldDirective],

И если мы запустим приложение, то увидим применение директивы к первому параграфу:

Для управления стилизацией элемента выше этот элемента извлекался через объект ElementRef в конструкторе директивы, и у него устанавливались стилевые свойства. Однако гораздо удобнее для управления стилем использовать рендерер. Так, изменим директиву следующим образом:

import {Directive, ElementRef, Renderer2} from '@angular/core';
 
@Directive({
    selector: '[bold]'
})
export class BoldDirective{
 
    constructor(private elementRef: ElementRef, private renderer: Renderer2){
 
        this.renderer.setStyle(this.elementRef.nativeElement, "font-weight", "bold");
    }
}

Renderer2 представляет сервис, который также при вызове директивы автоматически передается в ее конструктор, и мы можем использовать данный сервис для стилизации элемента. А результат работы будет тот же, что и выше.