{"id":34564,"date":"2016-05-23T15:29:44","date_gmt":"2016-05-23T09:59:44","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=34564"},"modified":"2017-09-12T12:43:55","modified_gmt":"2017-09-12T07:13:55","slug":"angular-2-component-dataflow","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/angular-2-component-dataflow\/","title":{"rendered":"Angular 2 component dataflow"},"content":{"rendered":"

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 a combination of Directives, controllers, and scope of Angular 1.<\/p>\n

Components<\/h3>\n

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

[js]<\/p>\n

@Component({
\n selector: "my-app"
\n })
\n @View({
\n templateUrl: "AppComponent.html"
\n })
\n class AppComponent() {
\n constructor () {
\n }
\n }<\/p>\n

[\/js]<\/p>\n

Angular 2 make directives<\/a> class-based structure, its unify Directives and Controllers into the Component model.<\/p>\n

INPUT AND OUTPUT PROPERTIES<\/h3>\n

A component has input and output properties, that can be passed to the @Component decorator to implement the downward and upward flow of data: \u201cinputs\u201d and \u201coutputs.\u201d.\u201cInputs\u201d property can set on a component whereas \u201coutputs\u201d property identifies the events a component can fire to send information up the hierarchy to its parent.<\/p>\n

\"WhatsApp-Image-20160515\"To better understand downward and upward flow of data, let\u2019s take an example of product rating and performance.we are going to create two components app component (Parent component) and rating component(Child component).<\/p>\n

Rating Component:<\/h4>\n

[js]
\nimport {Component, View, NgFor, NgClass, EventEmitter} from ‘@angular\/core’;
\n@Component({
\n directives: [NgFor, NgClass]
\n})<\/p>\n

export class RatingComponent{
\n\u00a0private range:Array<number> = [1,2,3,4,5];
\n\u00a0private performance:Array<string> = ["Very poor","poor","OK","good","Very good"];
\n\u00a0private rate:number;
\n\u00a0private productPerformance:EventEmitter = new EventEmitter();
\n update(value) {
\n \u00a0this.rate = value;
\n\u00a0 this.productPerformance.next(this.performance[value-1]);
\n }
\n\u00a0}
\n[\/js]<\/p>\n

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.\u201cInputs\u201d property define that we will take input from App component (Parent Component) and store it in ‘rate’ variable whereas \u201coutputs\u201d property defines that an EventEmitter object \u2018rateChange\u2019 that fire an event to sent data to the parent component.<\/p>\n

App Component:<\/h4>\n

[js]<\/p>\n

import {Component, View, bootstrap , CORE_DIRECTIVES} from ‘@angular2\/angular2’;
\nimport {RatingComponent} from ‘.\/rating.component’;<\/p>\n

@Component({
\n selector: ‘my-app’,
\n template: `
\n <rating [rate]="4"
\n (rate-change)="productPerformance=$event" >
\n Product performance:{{productPerformance}}
\n `,
\n directives: [RatingComponent, CORE_DIRECTIVES]
\n})
\nexport class App{
\n private rate: number;
\n private productPerformance: number;
\n}<\/p>\n

[\/js]<\/p>\n

In App Component (Parent Component) we are sending the value of product rating to Rating Component (Child Component) by attribute [rate]=”3″ and bind an EventEmmiter \u2018rate-change\u2019 to get product performance from Rating Component (child component) when using change product rating. You can try out the code at\u00a0http:\/\/plnkr.co\/edit\/xKaFd4jRid9mBVrt8mD8?p=preview
\nOutput:<\/p>\n

\"Screenshot<\/p>\n

Conclusion:<\/h3>\n

In this blog, we\u2019ve looked at Angular 2 components data-flow by using \u2018inputs\u2019 and \u2018output\u2019 properties and how they relate and how you pass data to them and how to get data back out. Overall this is not a bad way to build an application. But as your Angular applications<\/a> grow, dependencies between components and the data they render can become cumbersome. It can make reasoning about your application difficult and rely on data mutation and dirty checking can make testing harder.<\/p>\n

Read Further on AngularJS Series<\/p>\n