Binding same mouseover event to multiple [ngClass]

Question

<li class="dropdown-submenu dropdown pointer" (mouseover)="toogleClickEvent($event)" (mouseout)="toogleClickEvent($event)"
  [ngClass]="show">
  <a class="test" tabindex="-1"><i class="fa fa-language " aria-hidden="true"></i>{{'Language' | translate}}</a>
  <ul class="dropdown-menu">
    <li class="pointer"><a (click)="changeLang('en')">{{'English' | translate}}</a></li>
  </ul>
</li>

<li class="dropdown-submenu dropdown pointer" (mouseover)="toogleClickEvent($event)" (mouseout)="toogleClickEvent($event)"
  [ngClass]="show1">
  <a href="#"><i class="fa fa-gear" aria-hidden="true"></i>&nbsp;&nbsp;{{'Settings' | translate}}</a>
  <ul class="dropdown-menu">
    <li class="pointer"><a>{{'Default' | translate}}</a></li>
  </ul>
</li>

app.ts

export class app{
   show: string;
   toogleClickEvent($event) {
      this.show =   $event.type == 'mouseover' ? 'open' : '';
   }
}

In the code above I have two dropdowns where I am calling toogleClickEvent() in both dropdown but because of same method and same [ngclass] for both dropdown values are same I am getting so how to handle two different [ngclss] using one method other than creating new method

Answer 1

use (mouseover)="show='open'" (mouseout)="show=''" [ngClass]="show"

<li class="dropdown-submenu dropdown pointer" (mouseover)="show='open'" (mouseout)="show=''"
  [ngClass]="show">
  ....
</li>

<li class="dropdown-submenu dropdown pointer" (mouseover)="show1='open'" (mouseout)="show1=''"
  [ngClass]="show1">
  ....
</li>