For the life of me I cannot figure out why I cannot either emit or capture some data. The toggleNavigation() fires, but I'm not sure if the .emit() is actually working.

Eventually I want to collapse and expand the navigation, but for now I just want to understand how to send data from the navigationponent to the appponent.

Here is a Plunker link

appponent

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-navigationponent

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

I added Pankaj Parkar's suggestions.

For the life of me I cannot figure out why I cannot either emit or capture some data. The toggleNavigation() fires, but I'm not sure if the .emit() is actually working.

Eventually I want to collapse and expand the navigation, but for now I just want to understand how to send data from the navigation.ponent to the app.ponent.

Here is a Plunker link

app.ponent

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.ponent

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

I added Pankaj Parkar's suggestions.

• javascript
• angular
• typescript
• angular2-directives

1 Answer 1

You just need to specify $event parameter on method, so whatever emitted on navToggle output value, that data will be available inside AppComponent 'stoggleNavigationmethod$event` parameter.

<pas-navigation 
    (toggle)="toggleNavigation($event);">
</pas-navigation>

AppComponent

toggleNavigation(data) {
   // you can get emitted data here by `pas-navigation` ponent
   console.log('event', data);
}

Forked Plunkr