title: how to listen to custom events in components which are loaded using routing in Angular 4?
body: <p>In app.component.html </p>
  
  <pre><code>&lt;li routerLinkActive="active current"&gt;
         &lt;a  [routerLink]="['/stats']"&gt;
                      Cluster stats
         &lt;/a&gt;
     &lt;/li&gt;
  </code></pre>
  
  <p>Since we are routing to DisplayAllStatsComponent , how to listen for 'viewdetails' event triggered in above li or a tag?
  In app.module.ts</p>
  
  <pre><code>{ 
      path:'/stats', 
      component : DisplayAllStatsComponent
   }
  </code></pre>
  
  <p>In DisplayAllStatsComponent 
       when the component is clicked it triggers an event </p>
  
  <p>@Output('viewdetails') viewdetails = new EventEmitter();</p>
  
  <p>// here below function is called .</p>
  
  <pre><code>  callViewDetails(name,alias){
      let ev = {
        name:name,alias:alias
      };
      this.viewdetails.emit(ev); // here value is being emitted.
    }
  </code></pre>
  
  <p>now i need the emitted value in app.component.html</p>