Допустим, у меня список генерится через ngFor и нужно, что бы при наведении курсора на какой-либо объект ему добавлял класс, а после убирания курсора удалялся.
Как это можно сделать?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуДопустим, у меня список генерится через ngFor и нужно, что бы при наведении курсора на какой-либо объект ему добавлял класс, а после убирания курсора удалялся.
Как это можно сделать?
В общем, вот такую директиву сделал:
import { Directive, ElementRef, Renderer2, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appAddClassOnHover]'
})
export class AddClassOnHoverDirective {
@Input('appAddClassOnHover')
className: string
constructor(private el: ElementRef, private render2: Renderer2) { }
@HostListener('mouseover') onMouseEnter() {
this.render2.addClass(this.el.nativeElement, this.className);
}
@HostListener('mouseleave') onMouseLeave() {
this.render2.removeClass(this.el.nativeElement, this.className);
}
}
renderer
назівайте вместо render2
, и ElementRef
- дженерик, можно перегрузить тип и указать что директива биндится к дом єлементам private host: ElementRef<HTMLElement>
3 июн 2019 в 13:06
highlight
&dumb
c odinakovim bindingom testBinding
i bind9tsya oni kak <div highlight dumb testBinding="qwe">...</div>
- to Angular zabindit svoystva 2x directiv. sorry za engl, dolbanniy linux
3 июн 2019 в 15:14