меню

Декоратор @HostListener принимает в качестве аргумента имя события и позволяет запустить определенную функцию в тот момент, когда указанное событие наступит для данного элемента.

  
import { 
    //...
    HostListener 
} from '@angular/core';
//...
    @Directive({
    selector: '[appBetterHilight]'
    })
    export class BetterHilightDirective implements OnInit {
        //...
        @HostListener('mouseenter') onmouseenter() {
            this.renderer.setStyle(this.elRef.nativeElement, 'color', 'red');
        }

        @HostListener('mouseleave') onmouseleave() {
            this.renderer.setStyle(this.elRef.nativeElement, 'color', 'black');
        }
    }
  

Renderer2.setStyle не плох для работы со стилями, но есть способ проще. Декоратор @HostBinding позволяет связать свойство с внутренней переменной.

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

@Directive({
  selector: '[appBetterHilight]'
})
export class BetterHilightDirective implements OnInit {
  @HostBinding('style.backgroundColor') backgroundColor: string = 'transperent'; 
  //...
  @HostListener('mouseenter') onmouseenter() {
    this.backgroundColor = 'red';
  }
  @HostListener('mouseleave') onmouseleave() {
    this.backgroundColor = 'yellow';
  }
}
  

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

События

Рассмотрим события в Angular. Event Binding. Передача и использование данных с помощью event Binding

Установка и первый запуск Angular

Angular применяется для создания одностраничных приложений - SPA (Single Page Applications). Angular создает рендер программы, в отличие от подхода, когда весь контент загружен в DOM, а JavaScript его меняет.

Route. Контроль навигации с помощью сервиса

Деактивации роута в Angular5 и контроль навигации

Сервисы

Централизация логики и упрощение коммуникации между компонентами с помощью сервисов.

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

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

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

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

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

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

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