0
<div class="row">
  <div class="col-md-2 movie-item" *ngFor="let movie of movies" (mouseenter)="over=true" (mouseleave)="over=false">
    <div class="hidden-panel" [hidden]="!over">

    </div>
    <img class="poster" [src]="movie.Poster">
  </div>
</div>

Проблема в том что он показывает все сразу а не только тот над которым мышка. Я так понимаю в версия 2 и выше нет ng-init. Как правильно.Как с помощью директивы это сделать я не понимаю. Директива же применится только к тому элементу на котором она а мне воздействовать на дочерний элемент. Точнее я знаю как. через ссылку на элемент получить его дочернии уже с ними что то делать.Но это не очень

1 ответ 1

0

Сделал директиву

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

@Directive({
  selector: '[appHovered]'
})
export class HoveredDirective {
  @HostBinding('class.hovered') IsHovered = false;

  @HostListener('mouseover') OnMouseEnter() {
    this.IsHovered = true;
  }

  @HostListener('mouseleave') OnMouseLeave() {
    this.IsHovered = false;
  }
}

и через css меняю

.hovered div{
  display: block;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.