Директивы в Angular

Директива и ElementRef

@Directive({
    selector: '[appCustomTest]'
})
export class CustomTestDirective implements OnInit {
    @HostBinding('style.border') border: string;
    constructor(private el: ElementRef) {
        // this.el.nativeElement - является обычным Dom узлом
    }

ElementRef - предоставляется Angular при создании нового экземпляра директивы и ссылается на управляющий элемент.

Класс ElementRef предоставляет свойство nativeElement для доступа к элементу в модели DOM и всем соответствующим свойствам (classlist etc.).

Методы жизненного цикла директивы

Значение входного свойство директивы задается лишь после создания объекта директивы, то есть мы не сможем получить доступ к входному свойству в конструкторе. Чтобы решить эту проблему в Angular реализованы крючки (методы) жизненного цикла директивы.

• ngOnInit - вызывается после инициализации всех входных свойств
• ngOnChanges (OnChanges()) - вызывается при изменении значений входных свойств
• ngDoCheck - вызывается при запуске Angular процесса обнаружения изменений
• ngAfterContentInit - вызывается после инициализации контента директивы
• ngAfterContentChecked - вызывается после анализа контента директивы при запуске Angular процесса обнаружения изменений
• ngOnDestroy - вызывается перед уничтожением директивы

ngOnChanges(changes: SimpleChanges) {
    for (let propName in changes) {
        let chng = changes[propName];
        let cur  = JSON.stringify(chng.currentValue);
        let prev = JSON.stringify(chng.previousValue);
        this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
    }
}

Создание привязок для управляющих элементов (работаем с DOM API: события, свойства)

Более подробно на сайте dnzl.ru: Директивы в Angular