title: How to pass data from Child to Parent: Angular2
body: <p>I'm following the docs here: <a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent</a></p>
  <p>However so far not able to get a string variable from the child into the parent.</p>
  <hr />
  <h2>The Child</h2>
  <h3>Here I'm sending the category title to the emitter</h3>
  <pre><code>import { Component,
           ChangeDetectionStrategy,
           EventEmitter,
           Output,
           OnInit,
           ViewEncapsulation } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
      changeDetection: ChangeDetectionStrategy.Default,
      encapsulation: ViewEncapsulation.Emulated,
      selector: 'category',
      styleUrls: [ './category.component.css' ],
      templateUrl: './category.component.html'
  })
  export class CategoryComponent implements OnInit {
      title: string = '';
      @Output() onCategoryTitled = new EventEmitter&lt;string&gt;();
  
      constructor(private route: ActivatedRoute) {}
  
      ngOnInit() {
          this.title = this.route.snapshot.params['title'];
          console.log('this.title', this.title)
          this.onCategoryTitled.emit(this.title);
      }
  }
  </code></pre>
  <h2>The Parent app.component</h2>
  <h3>Here is the parent, I'm able to see the log from the child, but not the log here</h3>
  <pre><code>import { Component,
           Directive,
           ElementRef,
           Renderer,
           ChangeDetectionStrategy,
           OnInit,
           ViewEncapsulation } from '@angular/core';
  
  @Component({
      changeDetection: ChangeDetectionStrategy.Default,
      encapsulation: ViewEncapsulation.Emulated,
      selector: 'app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
      catTitle:string;
  
      onCategoryTitled(cat_title: string) {
          console.log('EVENT recieved cat_title:', cat_title)
          this.catTitle = cat_title;
      }
  
      ngOnInit() {
          console.log('AppComponent init')
      }
  }
  </code></pre>
  <h3>Parent markup (Where I need the title)</h3>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;&lt;div class=&quot;col-md-12 h20&quot;&gt;&lt;/div&gt;&lt;/div&gt;
  
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-md-8 col-sm-8&quot;&gt;
              &lt;ol class=&quot;breadcrumb&quot;&gt;
                  &lt;li&gt;&lt;a href=&quot;/wiki&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;{{ catTitle }}&lt;/li&gt;
                  &lt;!-- &lt;li&gt;&lt;a href=&quot;/wiki/category&quot;&gt;Categories&lt;/a&gt;&lt;/li&gt; --&gt;
              &lt;/ol&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;col-md-2 col-sm-2&quot;&gt;
              &lt;div class=&quot;input-group&quot;&gt;
                  &lt;input type=&quot;text&quot; class=&quot;search-input form-control&quot; placeholder=&quot;Search for...&quot;&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  
      &lt;footer class=&quot;container col-sm-12&quot;&gt;
          &lt;p&gt;©2017 &lt;strong&gt;WikiTags&lt;/strong&gt;
      &lt;/footer&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/1UxDV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1UxDV.png" alt="enter image description here" /></a></p>