Angular 2 Cookbook

Referencing a parent component from a child component

In the course of building an application, you may encounter a scenario where it would be useful to reference a parent component from a child component, such as to inspect member data or invoke public methods. In Angular 2, this is actually quite easy to accomplish.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/4907/.

Getting ready

Suppose you begin with the following ArticleComponent:

[app/article.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'article', 
  template: ` 
    <feedback [val]="likes"></feedback> 
  ` 
}) 
export class ArticleComponent { 
  likes:number = 0; 
   
  incrementLikes():void { 
    this.likes++; 
  } 
} 

Your objective is ...