how to pass the current tag instance to the events in angular2 - css

Question

I have a left sidebar menu which is populated by <li> and <ul> tag elements. I have handled the menu click event to expand/collapse the sub-menu items.
The problem I am facing here is I am not able to pass/identify the current instance of the tag element to do the expand/collapse i.e. If i expand a particular menu item all the other menus items are also getting affected. How do i handle this issue by identifying the current instance to do the required changes.
Please refer the snapshot about the issue
my HTML looks like below
<li [class.active]="menuLinkActive" (click)="MenuLinkToggle($event)">
<a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" [style.display]="subMenuDisplay">
<li>
Dashboard
</li>
<li>
Dashboard2
</li>
<li>
Dashboard3
</li>
</ul>
</li>
<li [class.active]="menuLinkActive" (click)="MenuLinkToggle($event)">
<a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" [style.display]="subMenuDisplay">
<li>
General Form
</li>
<li>
Advanced Components
</li>
</ul>
</li>
my component where i have handled the events
export class Layout {
menuLinkActive: any;
subMenuDisplay: any;
isSubMenuExpanded: any;
isMenuVisible: any;
MenuLinkToggle(event) {
if (this.isSubMenuExpanded) {
console.log("if (this.isMenuExpanded) {");
this.menuLinkActive = "";
this.subMenuDisplay = "none";
this.isSubMenuExpanded = false;
}
else {
console.log("else (this.isMenuExpanded) {");
this.menuLinkActive = "active";
this.subMenuDisplay = "block";
this.isSubMenuExpanded = true;
}
}
}

Answer 1

<li [class.active]="menuLinkActive" #li1 (click)="MenuLinkToggle($event, li1)">
MenuLinkToggle(event, element) {
or
MenuLinkToggle(event) {
event.target...