Angular Mouse enter

Question

как в angular сделать так,чтобы при наведении например на А он становлися красным то есть как добавить класс при нведении, Нужно чтобы было только с ангуларом без angular js

.over-color {
  color:red;
}

...

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

Answer 1

Например, можно использовать директиву для этого, дабы избежать дублирования. Создадим директиву hover-class

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

@Directive({
  selector: '[hover-class]'
})
export class HoverClassDirective {

  constructor(
    private elementRef: ElementRef
  ) { }

  @Input('hover-class') hoverClass: string;  

  @HostListener('mouseenter') onMouseEnter() {
    this.elementRef.nativeElement.classList.add(this.hoverClass);
 }

  @HostListener('mouseleave') onMouseLeave() {
    this.elementRef.nativeElement.classList.remove(this.hoverClass);
  }
}

и теперь можем её использовать:

<ul>
  <li hover-class="classA">A</li>
  <li hover-class="classB">B</li> 
  <li hover-class="classC">C</li>
  <li hover-class="classD">D</li>
  <li hover-class="classE">E</li>
</ul>

И уже самим классам можем прописать нужные стили

БЛОГ НА HUSL

Angular Mouse enter

Ответы (1 шт):