Struggling to understand why I am unable to send or receive some data. The toggleNavigation() function is triggering, but unsure if the .emit() method is actually functioning as intended.
My end goal is to collapse and expand the navigation menu, but for now, I simply want to grasp the concept of sending data from the navigation.component to the app.component.
Check out my Plunker link here
app.component
import { Component } from '@angular/core';
import { PasNavigationComponent } from './shared/index';
@Component({
moduleId: module.id,
selector: 'pas-app',
template: `
<pas-navigation
(toggle)="toggleNavigation($event);">
</pas-navigation>
<section id="pas-wrapper">
<pas-dashboard></pas-dashboard>
</section>
`,
directives: [PasNavigationComponent]
})
export class AppComponent {
toggleNavigation(data) {
console.log('event', data);
}
}
pas-navigation.component
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'pas-navigation',
template: `
<nav>
<div class="navigation-header">
<i class="fa fa-bars" (click)="toggleNavigation()"></i>
</div>
</nav>
`
})
export class PasNavigationComponent {
@Output('toggle') navToggle = new EventEmitter();
toggleNavigation() {
this.navToggle.emit('my data to emit');
}
}
EDIT
Implemented Pankaj Parkar's recommendations.