меню

Структурные директивы отвечают за html верстку. Они работают с DOM структурой добавляя, удаляя и манипулируя элементами.

Ангулар имеет встроенные структурные директивы NgIf, NgFor и NgSwitch.

Структурные директивы имеют удобную форму записи со звездой, которая является сахаром для конструкций вида:

 
<ng-template [ngIf]="...">
  ...
</ng-template>
 

Примеры работы со встроенными структурными директивами:

  
<div *ngIf="user" class="name">{{user.name}}</div>

<ul>
  <li *ngFor="let user of users">{{user.name}}</li>
</ul>

<div [ngSwitch]="myCaseValue">
    <p *ngSwitchCase="5">value is 5</p>
    <p *ngSwitchCase="15">value is 15</p>
    <p *ngSwitchCase="25">value is 25</p>
    <p *ngSwitchCase="35">value is 35</p>
</div>
  

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

Создадим файл unless.directive.ts:

  
import { Directive, Input, TemplateRef, ViewContainerRef  } from '@angular/core';

@Directive({
    selector: '[appUnless]'
})
export class UnlessDirective {
    @Input() set appUnless(condition: boolean) {
        if (!condition) {
            this.vcRef.createEmbeddedView(this.templateRef);
        } else {
        this.vcRef.clear();
        }
    }
    constructor(private templateRef: TemplateRef, private vcRef: ViewContainerRef) { }
}
  

Подключим UnlessDirective в массив declarations в AppModule.

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

 
<ul *appUnless="onlyOdd" class="list-group">
    <li *ngFor="let even of evenNumbers"
        class="list-group-item">
        {{even}}  
    </li>
</ul>
  

Выпадающий список

Рассмотрим пример использования структурной директивы для создания выпадающих списков. Для списка используем элемент бутстрапа, у открытого списка добавляется каласс open:

 
import { Directive, HostListener, HostBinding } from '@angular/core';

@Directive({
    selector: '[appDropdown]'
})
export class DropdownDirective {
    @HostBinding('class.open') isOpen = false;
    @HostListener('click') toggleOpen() {
        this.isOpen = !this.isOpen;
    }
}
  

Возможно, вам будет интересно

Директива атрибута

Создание директивы атрибута и использование класса Renderer2 в Angular

Route. Защита роутера

Использование интерфейсов CanActivate и CanActivateChild для принятия решения об активации роутера

Route Resolving

Разрешение динамических данных перед активацией роута и интерфейс Resolve в Angular

Компонент и данные

В данном руководстве пойдет речь о селекторе, Databinding, интерполяции, связывание свойств и многом другом.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту