Angular2 : having multiple output on a component

Question

I am currently trying to have a component in Angular2, but trying to implement it with multiple Outputs. I have a parent component and a navbar component

Parent component :

@Component({
    selector:"personal-dashboard",
    directives:[NavBar],
    template:`
        <navbar [hidden]= "!loggedIn" (loggingOut) ="unlogSuccess($event)" (changedTab)="changingTab($event)"></navbar>
    `
})

export class PersonalDashboard{
    tabNumber:number =0; //0 is for the default Courses tab


    unlogSuccess(event){
        this.loggedIn = false;
    }

    changingTab(event){
        if(event == 'courses-tab'){
            this.tabNumber = 0;
        }
        else if (event == 'activities-tab'){
            this.tabNumber = 1;
        }
    }
}

Navbar Component :

@Component({
    selector:"navbar",
    template:`

<ul class="nav navbar-nav">
    <li id="courses-tab" class="principal-navbar active"><a href="#" (click)="changingTab('courses-tab')">Courses</a></li>
    <li id="activity-tab" class="principal-navbar"><a href="#" (click)="changingTab('activity-tab')">Activity</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
    <li><a href=# (click)="logout()">Logout</a></li>

</ul>

    `
})

export class NavBar{
    @Output() loggingOut = new EventEmitter();
    @Output() changedTab = new EventEmitter();

    logout(){
        Cookies.remove("oauth_token");
        Cookies.remove("coursesData");
        this.loggingOut.emit(true);
    }

    changingTab(tabName){
        (<any>$("li.principal-navbar")).each(function(index){
            if ((<any>$(this)).attr('id') == tabName){
                (<any>$(this)).addClass("active");
                this.changedTab.emit(tabName);
            }
            else{
                (<any>$(this)).removeClass("active");
            }
        });
    }
}

I simplified the files so it looks clearer. What I am trying to do is have two possible outputs from the navbar that are triggered by clicks on different parts of the navbar. One is a changing tab action and the other is a logout action. So I tried to write in the parent component that the navbar component should have two different outputs and I handle them in two different methods in the parent component (unlogSuccess and changingTab methods).

I also created in the navbar component two outputs with the @Output decorator. Then, on different part of the template I trigger different function of the navbar class that emit events to the two different Output that I created.

I have no problem when I compile. However when I try to trigger the second Output I created, it says that 'this.changedTab' is undefined. It works perfectly for the loggingOut output, that I create first. So I thought that maybe angular2 doesn't let you create multiple outputs on a simple component.

As I described my problem, can you confirm this ? Is it impossible to have multiple outputs in a single component ? If so, what is the good way to do what I am trying to achieve ?

Thierry Templier Thierry Templier · Accepted Answer · 2016-03-21T08:51:41

You need to use an arrow function to be able to use the lexical this:

(<any>$("li.principal-navbar")).each((index) => { // <-------
        if ((<any>$(this)).attr('id') == tabName){
            (<any>$(this)).addClass("active");
            this.changedTab.emit(tabName);
        }
        else{
            (<any>$(this)).removeClass("active");
        }
    });
}

Angular2 : having multiple output on a component

1 Answers