Атрибутивные директивы

Атрибутивные директивы изменяют внешний вид или поведение существующего элемента. В шаблонах они выглядят как обычные атрибуты HTML, отсюда и название.

В Ангуляре есть готовые атрибутные директивы, но также мы можем создавать их сами. Давайте рассмотрим самые популярные атрибутные директивы из коробки - ngModel, ngClass, ngStyle.

ngModel

Директива ngModel, которая реализует двухстороннюю привязку данных, является одним из примеров атрибутивной директивы. NgModelизменяет поведение существующего элемента (обычно <input> и к другим HTML form элементам), устанавливая в его свойство value указанное значение и реагирует на изменения этого свойства(value ).

<input [(ngModel)]="name">

ngClass

Директива ngClass позволяет определить набор классов, которые будут применяться к элементу. Например, у нас есть 2 css класса:

    .bold {
        font-weight: bold;
    }
    .uppercase {
        text-transform: uppercase;
    }

И создадим след. html:

<p [ngClass]="{ bold: true }">Bold text</p>
<p [ngClass]="{ bold: true, uppercase: true }">Bold and upper text </p>

В шаблоне для привязки класса к элементу применяется директива [ngClass]="{ bold: true }" и[ngClass]="{ bold: true, uppercase: true }". Эта директива принимает js-объект, в котором ключи - это названия классов. Этим названиям присваиваются булевые значения true (если класс применяется) и false (если класс не применяется).

В качестве альтернативы мы можем использовать следующие выражения привязки:

<p [class.bold]="true">Bold text</p>
<p [class.bold]="true" [class.uppercase]="true">Bold and upper text </p>

ngStyle

Директива ngStyleпозволяет задать набор стилей, которые применяются к элементу. В качестве значения директива принимает js-объект, в котором ключи - названия свойств CSS:

<p [ngStyle]="{ 'font-weight': 'bold' }">Bold text</p>
<p [ngClass]="{ 'font-weight': 'bold', 'text-transform: 'true' }">Bold and upper text </p>

Аналогично для установки стилей можно применять свойства объекта style:

<p [style.font-weight]="'bold'">Bold text</p>
<p [style.font-weight]="'bold'" [style.text-transform]="'uppercase'">Bold and upper text </p>

Динамическое изменение стилей

В примерах выше мы передавали значение true/false прям в темплейте. Что делать если мы хотим управлять этими классами?

Как мы видим ngClass, ngStyle заключены в квадратные скобки (дата байдинг в действии). Давайте используем это и модернизируем наш код.

<p [ngClass]="{ bold: isBold }">Bold text</p>
<p [ngClass]="{ bold: isBold, uppercase: true }">Bold and upper text </p>
<button (click)="toggle()">Toggle</button>


export class AppComponent { 

    public isBold: boolean = true;

    public toggle(){
        this.isBold = !this.isBold;
    }
}

Выражение [ngClass]="{ bold: isBold}" устанавливает для класса bold привязку к значению переменной isBold. По нажатию на кнопку мы можем переключать это свойство, тем самым управляя классом блока.

Так мы можем использовать тернарный оператор:

<p [style.font-weight]="isBold === true ? 'bold' : '100'">Bold text</p>

Атрибутивные директивы