[AngularJS] how to pass the current tag instance to the events in angular2

[Navaneetha Krishnan S]

I have a left sidebar menu which is populated by <li> and <ul> tag 
elements. I have handled the menu click event to exapnd/collapse the 
submenu 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

 [image: enter image description here] <http://i.stack.imgur.com/PKJbB.png>

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>
                        <a href="index.html">Dashboard</a>
                </li>
                <li>
                        <a href="index2.html">Dashboard2</a>
                </li>
                <li>
                        <a href="index3.html">Dashboard3</a>
                </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>
                        <a href="form.html">General Form</a>
                </li>
                <li>
                        <a href="form_advanced.html">Advanced Components</a>
                </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;
        }
    }}

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.