DirecTwiX
@DirecTwiX
"display: flex;" уже предлагали?

Angular2. Как добавить класс блоку при mousehover?

Ничего простого в интернете не нарыл..
  • Вопрос задан
  • 616 просмотров
Решения вопроса 2
AMar4enko
@AMar4enko
@Component({
  selector: 'mouse-hover-test',
  template: '<div [class.hovered]="hovered"></div>"'
})
class MouseHoverTestCmp {
  public hovered: boolean;
  @HostListener('mouseover') onMouseOver() {
    this.hovered = true; 
  }
  @HostListener('mouseout') onMouseOut() {
    this.hovered = false; 
  }
}

А если реюзабельности захочется:
@Directive({
  selector: '[hoverClass]'
})
class HoverClassCmp { 
  @Input('hoverClass') className: string;
  @HostBinding('class') activeClass: string;
  @HostListener('mouseover') onMouseOver() {
    this.activeClass = this.className;
  }
  @HostListener('mouseout') onMouseOut() {
    this.activeClass = ''; 
  }
}
Ответ написан
@bromzh
Drugs-driven development
А повестить обработчик можно только на весь компонент целиком? Хотелось бы на отедльный dom-элемент


Ну так тоже просто: plnkr.co/edit/WaVyVLBI0B3zEo8vOnRL?p=preview
@Component({
  selector: 'my-app',
  styles: [`
    .highlight { background: yellow; }
  `],
  template: `
    <h1 [class.highlight]="highlighted">My First Angular 2 App</h1>
    <div
      (mouseover)="onMouseOver()"
      (mouseout)="onMouseOut()">Hover me</div>
  `
})
export class AppComponent {
  highlighted: boolean;
  
  onMouseOver() {
    this.highlighted = true;
  }
  onMouseOut() {
    this.highlighted = false;
  }
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы