Angular 2 component dataflow

23 / May / 2016 by Vishal Bajpai 2 comments

Angular 2 leverages the power of web components. If you are familiar with Angular 1, you know the term directives. Actually directives are still here in Angular 2 . Components are combination of Directives , controllers and scope of Angular 1.


Angular 2 app has at least one root component. Components are the basic building blocks of angular application that encapsulates the template, data and behaviour of the view through associate decorator-style directives with it,In following example there are two decorator functions associate with AppComponent. Decorator function takes a metadata object, @Component decorator to set selector and @View decorator to set template url.

     selector: "my-app"
     templateUrl: "AppComponent.html"
 class AppComponent() {
     constructor () {

Angular 2 make directives class-based structure, its unify Directives and Controllers into the Component model.


A component has input and output properties,that can be passed to the @Component decorator to implement the downward and upward flow of data: “inputs” and “outputs.”.“Inputs” property can set on a component whereas “outputs” property identifies the events a component can fire to send information up the hierarchy to its parent.

WhatsApp-Image-20160515To better understand downward and upward flow of data, let’s take an example of product rating and performance.we are going to create two components app component (Parent component) and rating component(Child component).

Rating Component:

import {Component, View, NgFor, NgClass, EventEmitter} from '@angular/core';
    directives: [NgFor, NgClass]

export class RatingComponent{
 private range:Array<number> = [1,2,3,4,5];
 private performance:Array<string> = ["Very poor","poor","OK","good","Very good"];
 private rate:number;
 private productPerformance:EventEmitter = new EventEmitter();
 update(value) {
     this.rate = value;[value-1]);

Rating component (Child Component) has input and output properties,that are passed to the @Component decorator to implement the downward and upward flow of data.“Inputs” property define that we will take input from App component (Parent Component) and store it in ‘rate’ variable whereas “outputs” property define that a EventEmitter object ‘rateChange’ that fire an event to sent data to parent component.

App Component:

import {Component, View, bootstrap , CORE_DIRECTIVES} from '@angular2/angular2';
import {RatingComponent} from './rating.component';

    selector: 'my-app',
    template: `
       <rating [rate]="4"
        (rate-change)="productPerformance=$event" >
        Product performance:{{productPerformance}}
    directives: [RatingComponent, CORE_DIRECTIVES]
export class App{
  private rate: number;
  private productPerformance: number;

In App Component (Parent Component) we are sending value of product rating to Rating Component (Child Component) by attribute [rate]=”3″ and bind a EventEmmiter ‘rate-change’ to get product performance from Rating Component (child component) when use change product rating. You can try out the code at

Screenshot from 2016-05-14 20:40:44


In this blog we’ve looked at Angular 2 components data-flow by using ‘inputs’ and ‘output’ properties and how they relate and how you pass data into them and how to get data back out. Overall this is not a bad way to build an application. But as your applications grow, dependencies between components and the data they render can become cumbersome. It can make reasoning about your application difficult, and relying on data mutation and dirty checking can make testing harder.


comments (2)

Leave a comment -