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


Атрибутивные директивы меняют поведение элемента, к которому они применяются. Например, директива ngClass позволяет установить для элемента класс CSS. При этом сама директива применяется к элементу в виде атрибута:
<code javascript> 
<div [ngClass]="{verdanaFont:true}">
</code>

И при необходимости мы можем сами создавать какие-то свои директивы атрибутов для каких-то определенных целей. Итак, создадим свою директиву. Добавим в папку src/app новый файл, который назовем **bold.directive.ts**:
{{ :angular:angular2:directive:3.7.png |}}
====создание директивы с помощью сервиса ng====
<code powershell>
ng g d bold
</code>

====создание сервиса вручную====

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

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

Директива - это обычный класс на TS, к которому применяется декоратор **Directive**, соответственно нам надо импортировать эту директиву из //"angular/core"//. Кроме того, здесь импортируется класс //"ElementRef"//. Он представляет ссылку на элемент, к которому будет применяться директива.\\
\\
При применении декоратора //@Directive// необходимо определить селектор CSS, с которым будет ассоциирована директива. Селектор CSS для атрибута должен определяться в квадратных скобках. В данном случае в качестве селектора выступает //[bold]//.\\
\\
Сам декоратор //@Directive// применяется к классу, который называется //BoldDirective//. Это собственно и есть класс директивы, который определяет ее логику.\\
\\
Для получения элемента, к которому применяется данная директива, в классе определен конструктор, имеющий один параметр: //private elementRef//: ElementRef. Через этот параметр Angular будет передавать или инжектировать тот элемент из шаблона, в котором применяется директива.\\
\\
Поскольку параметр определен с ключевым словом //private//, то для него будет создаваться одноименная приватная переменная, через которую мы можем получить объект ElementRef и произвести с ним какие-либо манипуляции. В частности, здесь идет обращение к вложенному свойству //nativeElement//, через которое у элемента устанавливается жирный шрифт:\\

<code javascript>
this.elementRef.nativeElement.style.fontWeight = "bold";
</code>

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

<code javascript>
import { Component} from '@angular/core';
 
@Component({
    selector: 'my-app',
    template: `<div>
                  <p bold>Hello Angular</p>
                  <p>Angular представляет модульную архитектуру приложения</p>
               </div>`
})
export class AppComponent {}
</code>
Здесь определено два параграфа, и к первому из них применяется директива. Поскольку в коде директивы был определен селектор "[bold]", то чтобы ее применить, в коде элемента применяется данный селектор.\\
\\
Но сама по себе директива не заработает. Нам еще надо ее подключить в модуле приложения - классе AppModule:
<code javascript>
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 { }
</code>

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

<code javascript>
import { BoldDirective} from './bold.directive';
</code>

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

<code javascript>
declarations: [ AppComponent, BoldDirective],
</code>

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

{{ :angular:angular2:directive:3.2.png |}}
\\
Для управления стилизацией элемента выше этот элемента извлекался через объект //ElementRef// в конструкторе директивы, и у него устанавливались стилевые свойства. Однако гораздо удобнее для управления стилем использовать //рендерер//. Так, изменим директиву следующим образом:

<code javascript>
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");
    }
}
</code>
Renderer2 представляет сервис, который также при вызове директивы автоматически передается в ее конструктор, и мы можем использовать данный сервис для стилизации элемента. А результат работы будет тот же, что и выше.