Как я могу нацелить и изменить CSS-свойство границ div с классом Presenter-Menu_avatar на mouseOver в Angular? - PullRequest
Новая
       6

Как я могу нацелить и изменить CSS-свойство границ div с классом Presenter-Menu_avatar на mouseOver в Angular?

0 голосов
/ 10 февраля 2019

Как я могу нацелить и изменить CSS-свойство границы div в моем HTML с помощью класса Presenter-Menu_avatar для mouseOver в приложении Angular?Я попытался [ngClass], однако, похоже, что я не реализую его правильно, так как это заставляет все приложение постоянно падать.

component.ts: 

export class Component {
  private isPopupDisplayed: boolean = false;

  onClick() {
    console.log('Clicked');
    this.isPopupDisplayed = true;
  }

  onClickedOutside(event) {
    this.isPopupDisplayed = false;
  }

}

CSS: 

.presenter-menu {
  background: $accent-color;
  &_avatar {
    &:after {
      border: 0.25rem solid $accent-color;
    }

  }

}

HTML: 

<div *ngIf="isPopupDisplayed" >
        <ul class="popup" (clickOutside)="onClickedOutside($event)">
            <li><a>My Details</a></li>
            <li><a>Sign out</a></li>
        </ul> 
    </div>

    <div class="presenter-menu_avatar" (click)="onClick()" >
        <img [src]="avatarUrl">
    </div>
...