{"id":736,"date":"2018-01-02T03:42:00","date_gmt":"2018-01-02T03:42:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=736"},"modified":"2025-02-19T13:05:22","modified_gmt":"2025-02-19T13:05:22","slug":"angular-component-data-flows","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/angular-component-data-flows","title":{"rendered":"Angular Component Data Flows Using @Output and EventEmitter"},"content":{"rendered":"\n<p>No modern web framework can exist without support of two-way data binding.&nbsp;Angular provides&nbsp;this function&nbsp;using&nbsp;the&nbsp;ngModel&nbsp;directive. To use that, you need to import&nbsp;<b>FormsModule<\/b>&nbsp;and&nbsp;then you can use it in various ways, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>ngModel&nbsp;&nbsp;<\/li>\n\n\n\n<li>[<span data-contrast=\"auto\">ngModel<\/span><span data-contrast=\"auto\">]<\/span>&nbsp;<\/li>\n\n\n\n<li>[(<span data-contrast=\"auto\">ngModel<\/span><span data-contrast=\"auto\">)]<\/span>&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>You may&nbsp;wonder&nbsp;why Angular does not have two-way data binding like AngularJS. AngularJS&nbsp;once&nbsp;implemented&nbsp;two-way data binding using digest cycle, dirty checking algorithms, and others, and these approaches had&nbsp;their own problems. In&nbsp;this&nbsp;article,&nbsp;we&nbsp;will&nbsp;focus on&nbsp;problems with AngularJS two-way data binding&nbsp;so that you understand why it is handled differently in Angular.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p>Coming back to Angular, two- way data binding can be depicted as&nbsp;shown&nbsp;below:&nbsp;<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/pastedimage1553010860469v1.png\" alt=\" two- way data binding can be depicted as\u00a0shown\" title=\"two- way data binding can be depicted as\u00a0shown\"\/><\/figure>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>Square brackets\u00a0represent\u00a0property binding, small brackets represent event binding, and\u00a0the\u00a0combination of both represents two-way data binding. Syntax of two-way data binding is also called banana in the box syntax.\u00a0Learn more about <a href=\"\/blogs\/two-way-data-binding-in-angular\/\">data bindings here<\/a>.<\/p>\n\n\n\n<p>Now, you have some understanding of different types of binding in Angular; let\u2019s&nbsp;see how data can flow between<a href=\"\/products\/ignite-ui-angular\"> Angular components<\/a>. Data could be&nbsp;of&nbsp;primitive types, arrays, objects, or events. To flow data between components, Angular provides:&nbsp;&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>@Input decorator&nbsp;&nbsp;<\/li>\n\n\n\n<li>@Output decorator&nbsp;&nbsp;<\/li>\n<\/ol>\n\n\n\n<p>Both of these decorators&nbsp;are part of&nbsp;<b>@angular\/<\/b><b>core<\/b>.&nbsp;&nbsp;<\/p>\n\n\n\n<p><b>@<\/b><b>Input(<\/b><b>) decorator<\/b>&nbsp;marks a class field as an&nbsp;<b>input property<\/b>&nbsp;and supplies configuration metadata.&nbsp;It declares a data-bound input property, which Angular automatically updates during change detection.&nbsp;<\/p>\n\n\n\n<p><b>@Output decorator<\/b>&nbsp;marks a class field as an&nbsp;<b>output property<\/b>&nbsp;and supplies configuration&nbsp;metadata.&nbsp;It declares a data-bound output property, which Angular automatically updates during change detection.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/pastedimage1553010960387v2.png\" alt=\" Both of these decorators\u00a0are part of\u00a0@angular\/core\" title=\"Both of these decorators\u00a0are part of\u00a0@angular\/core\"\/><\/figure>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>These two decorators are used to flow data between components. Keep in mind that besides these two decorators, you can also use Angular services to flow data between&nbsp;the&nbsp;components.&nbsp;If you have to pass data into a component use @Input decorator, and if you have to emit data from a component use @Output decorator.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p>Both decorators&nbsp;work&nbsp;between components when they are related to each other.&nbsp; For example, if you are using a component called&nbsp;ChildComponent&nbsp;inside another component called&nbsp;AppComponent, they are related to each other.&nbsp;&nbsp;You&nbsp;can&nbsp;see&nbsp;this&nbsp;in&nbsp;the&nbsp;below image,&nbsp;and any&nbsp;ChildComponent&nbsp;property decorated with @Input decorator can receive data from the&nbsp;AppComponent.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/pastedimage1553011019531v3.png\" alt=\" Both decorators\u00a0work\u00a0between components when they are related to each other\" title=\"Both decorators\u00a0work\u00a0between components when they are related to each other\"\/><\/figure>\n\n\n\n<p>To understand&nbsp;it better, consider&nbsp;ChildComponent&nbsp;as listed below:&nbsp;&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import {\n    Component,\n    OnInit,\n    Input\n}\n\nfrom '@angular\/core';\n\n@Component({\n    selector: 'app-child',\n    template: ` &lt;p>count= {\n            {\n            count\n        }\n    }\n    &lt;\/p> `\n}) export class ChildComponent implements OnInit {\n    constructor() {}\n    @Input() count: number;\n    ngOnInit() {}\n}<\/pre>\n\n\n\n<p>If you look closely&nbsp;at the&nbsp;above code snippet, we are using @Input() decorator with count property, which implies that value of count property will be set from outside the&nbsp;ChildComponent.&nbsp; We can use&nbsp;ChildComponent&nbsp;inside&nbsp;AppComponent&nbsp;and can use property binding to pass value for count property as shown in below listing:&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import { Component } from \"@angular\/core\";\n\n@Component({\n  selector: \"app-root\",\n  template: `&lt;h2>{{ title }}&lt;\/h2>\n\n    &lt;app-child [count]=\"count\">&lt;\/app-child> `,\n})\nexport class AppComponent {\n  count = 9;\n}<\/pre>\n\n\n\n<p>We are using&nbsp;ChildComponent&nbsp;inside&nbsp;AppComponent&nbsp;and using the property binding passing data in the&nbsp;ChildComponent.&nbsp;&nbsp;Right&nbsp;now&nbsp;data is being passed in one-way&nbsp;directional flow&nbsp;to the&nbsp;ChildComponent.&nbsp;&nbsp;Keep in mind that&nbsp;any time&nbsp;the&nbsp;value of an&nbsp;input-bound property updates, Angular runs change detector. However, you can configure how change detector should run on @Input decorator. Also each time @input decorator property updates, Angular runs&nbsp;ngOnChanges() life cycle hook, so you can read&nbsp;the&nbsp;updated value of input-bound property in&nbsp;ngOnChanges() life cycle hook.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Now&nbsp;that&nbsp;we know how to pass data from parent component to a child component, let\u2019s&nbsp;switch&nbsp;our focus to how data and events can be emitted from a child component to a parent component.&nbsp; To emit data and event out from a component, we need&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To decorate property with @output decorator. By&nbsp;doing,&nbsp;this property becomes an outbound data property.&nbsp;&nbsp;<\/li>\n\n\n\n<li>Create instance of&nbsp;EventEmitter&nbsp;and decorate it with @Output decorator.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>&nbsp;Note in the&nbsp;below image&nbsp;that data or events go outside of a component using @Output decorator.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/2110.pastedimage1553022542036v1.png\" alt=\" Note in the\u00a0below image\u00a0that data or events go outside of a component using @Output decorator\" title=\"Note in the\u00a0below image\u00a0that data or events go outside of a component using @Output decorator\"\/><\/figure>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>Before&nbsp;I explain&nbsp;how&nbsp;EventEmitter&nbsp;operates&nbsp;in detail, please&nbsp;review&nbsp;&nbsp;the below&nbsp;code example.&nbsp; Modify&nbsp;ChildComponent&nbsp;with a button as shown in listing below:&nbsp;&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import {\n    Component,\n    OnInit,\n    Input\n}\n\nfrom '@angular\/core';\n\n@Component({\n    selector: 'app-child',\n    template: ` &lt;p>count= {\n            {\n            count\n        }\n    }\n\n    &lt;\/p> &lt;button (click)='updateCount()' >update count &lt;\/button> `\n\n}) \nexport class ChildComponent implements OnInit {\n\n    constructor() {}\n    @Input() count: number;\n    ngOnInit() {}\n    updateCount() {\n        this.count=this.count+1;\n    }\n\n}<\/pre>\n\n\n\n<p>When you click on button in the&nbsp;ChildComponent, it updates count value. Super simple.&nbsp;&nbsp;So far,&nbsp;click event is handled inside the&nbsp;ChildComponent&nbsp;itself.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Now,&nbsp;let us&nbsp;tweak the requirement&nbsp;a bit. What if&nbsp;you want to execute a function of&nbsp;AppComponent&nbsp;on the click event of&nbsp;a&nbsp;button inside<b>&nbsp;<\/b>ChildComponent?<\/p>\n\n\n\n<p>To do this, you will have to emit&nbsp;the&nbsp;button click event from&nbsp;ChildComponent.&nbsp;With event emit you can also send data out from the&nbsp;ChildComponent.&nbsp;&nbsp;Let\u2019s&nbsp;modify&nbsp;ChildComponent&nbsp;to emit data and event to be captured in&nbsp;AppComponent.&nbsp;&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import {\n    Component,\n    OnInit,\n    Input,\n    Output,\n    EventEmitter\n}\n\nfrom '@angular\/core';\n\n@Component({\n\n    selector: 'app-child',\n\n    template: ` &lt;p>count= {\n            {\n            count\n        }\n    }\n    &lt;\/p>&lt;button (click)='updateCount()' >update count &lt;\/button> `\n\n}) \nexport class ChildComponent implements OnInit {\n\n    constructor() {}\n\n    @Input() count: number;\n\n    @Output() countChange=new EventEmitter();\n\n    ngOnInit() {}\n\n    updateCount() {\n\n        this.count=this.count+1;\n\n        this.countChange.emit(this.count);\n\n    }\n\n}<\/pre>\n\n\n\n<p>Right now, we are performing the following tasks in&nbsp;the&nbsp;ChildComponent&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Created&nbsp;instance of&nbsp;EventEmitter&nbsp;called&nbsp;countChange, which will be emitted to&nbsp;the&nbsp;parent component on the click event of the button.&nbsp;&nbsp;<\/li>\n\n\n\n<li>Created a function&nbsp;named&nbsp;updateCount(). This function is called on the click event of the button, and&nbsp;inside the function&nbsp;event&nbsp;countChange&nbsp;is emitted.&nbsp;&nbsp;<\/li>\n\n\n\n<li>While emitting&nbsp;countChange&nbsp;&nbsp;event, value of&nbsp;count property is also sent out of component.&nbsp;&nbsp;<\/li>\n<\/ol>\n\n\n\n<p>Before we move ahead let us understand&nbsp;<b>EventEmitter<\/b>. It is used in the directives and components to emit custom events either synchronously or asynchronously.&nbsp; Any handler can handle&nbsp;these events by subscribing to&nbsp;an&nbsp;instance of&nbsp;EventEmitter&nbsp;class.&nbsp; It is different than&nbsp;a&nbsp;normal HTML event, as it uses&nbsp;RxJS&nbsp;observable such that&nbsp;the&nbsp;handler can subscribe to the&nbsp;event.&nbsp;&nbsp;<\/p>\n\n\n\n<p>If you look into implementation of&nbsp;EventEmitter&nbsp;class, it extends Subject class.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/pastedimage1553021285146v8.png\" alt=\" If you look into implementation of\u00a0EventEmitter\u00a0class, it extends Subject class\" title=\"If you look into implementation of\u00a0EventEmitter\u00a0class, it extends Subject class\"\/><\/figure>\n\n\n\n<p>&nbsp;&nbsp;<\/p>\n\n\n\n<p>Since&nbsp;EventEmitter&nbsp;class extends&nbsp;RxJs&nbsp;Subject class,&nbsp;this&nbsp;means it is&nbsp;observable and can be&nbsp;multicasted&nbsp;to many observers.&nbsp; It is not&nbsp;the&nbsp;same as&nbsp;a&nbsp;DOM event,&nbsp;which?&nbsp;cannot be&nbsp;muticasted&nbsp;and observed.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p>In the&nbsp;AppComponent, you can handle emitted event from&nbsp;ChildComponent&nbsp;as shown in&nbsp;the&nbsp;below code&nbsp;listing:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import\u00a0{\u00a0Component\u00a0}\u00a0from\u00a0'@angular\/core';\u00a0\n\n@Component({\u00a0\n\u00a0\u00a0selector:\u00a0'app-root',\u00a0\n\u00a0\u00a0template:\u00a0`&lt;h2>{{title}}&lt;\/h2>\u00a0\n\u00a0 &lt;app-child [count]='count' (countChange)=changeCount($event)>&lt;\/app-child>`\u00a0\n})\u00a0\n\nexport\u00a0class\u00a0AppComponent\u00a0{\u00a0\n\u00a0\u00a0\u00a0count\u00a0=\u00a09;\u00a0\n\u00a0\u00a0\u00a0changeCount(data) {\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(data);\u00a0\n\u00a0\u00a0 }\u00a0\n}<\/pre>\n\n\n\n<p>Right now, we are performing the following tasks in&nbsp;the&nbsp;<b>AppComponent<\/b>&nbsp;class:&nbsp;&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Using &lt;app-child&gt; in the template.&nbsp;&nbsp;<\/li>\n\n\n\n<li>In&nbsp;the&nbsp;&lt;app-child&gt; element,&nbsp;using event binding to use&nbsp;the&nbsp;countChange&nbsp;event.&nbsp;&nbsp;<\/li>\n\n\n\n<li>Calling&nbsp;the&nbsp;changeCount&nbsp;function on the&nbsp;countChange&nbsp;event.&nbsp;&nbsp;<\/li>\n\n\n\n<li>In&nbsp;the&nbsp;changeCount&nbsp;function, printing&nbsp;the&nbsp;value of&nbsp;the&nbsp;count&nbsp;passed from&nbsp;the&nbsp;ChildComponent.&nbsp;&nbsp;<\/li>\n<\/ol>\n\n\n\n<p>As you can see, the&nbsp;function of&nbsp;AppComponent&nbsp;is called on the click event of the button placed on&nbsp;the&nbsp;ChildComponent. This&nbsp;can be done with&nbsp;@Output and&nbsp;EventEmitter.&nbsp;&nbsp;Right now data is flowing between components&nbsp;using&nbsp;the&nbsp;@Input() and @Output() decorators.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/pastedimage1553021329739v9.png\" alt=\" Right now data is flowing between components\u00a0using\u00a0the\u00a0@Input() and @Output() decorators.\" title=\"Right now data is flowing between components\u00a0using\u00a0the\u00a0@Input() and @Output() decorators.\"\/><\/figure>\n\n\n\n<p>As you see we created two-way data binding between two components. If you look at the code, it is&nbsp;a&nbsp;combination of property binding and event binding.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/pastedimage1553021394734v10.png\" alt=\" If you look at the code, it is\u00a0a\u00a0combination of property binding and event binding\" title=\"If you look at the code, it is\u00a0a\u00a0combination of property binding and event binding\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"a-real-time-example\">A Real Time Example<\/h2>\n\n\n\n<p>Let\u2019s take a real-time example to find how @Output and&nbsp;EventEmitter&nbsp;are more useful.&nbsp;Consider that&nbsp;<b>AppComponent<\/b>&nbsp;is rendering&nbsp;a&nbsp;list of products in tabular form as shown in the image&nbsp;below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/pastedimage1553021414788v11.png\" alt=\" take a real-time example to find how @Output and\u00a0EventEmitter\u00a0are more useful\" title=\"take a real-time example to find how @Output and\u00a0EventEmitter\u00a0are more useful\"\/><\/figure>\n\n\n\n<p>To create&nbsp;the&nbsp;product table&nbsp;above, we have&nbsp;a&nbsp;very simple&nbsp;<b>AppComponent<\/b>&nbsp;class with&nbsp;only one function: to&nbsp;return&nbsp;a&nbsp;list of products.&nbsp;&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">export\u00a0class\u00a0AppComponent\u00a0implements\u00a0OnInit\u00a0{\u00a0\n\u00a0 products = [];\u00a0\n\u00a0 title =\u00a0'Products';\u00a0\n\u00a0\u00a0ngOnInit() {\u00a0\n\u00a0\u00a0\u00a0\u00a0this.products\u00a0=\u00a0this.getProducts();\u00a0\n\u00a0 }\u00a0\n\n\u00a0\u00a0getProducts() {\u00a0\n\u00a0\u00a0\u00a0\u00a0return\u00a0[\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\u00a0'id':\u00a0'1',\u00a0'title':\u00a0'Screw Driver',\u00a0'price':\u00a0400,\u00a0'stock':\u00a011\u00a0},\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\u00a0'id':\u00a0'2',\u00a0'title':\u00a0'Nut Volt',\u00a0'price':\u00a0200,\u00a0'stock':\u00a05\u00a0},\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\u00a0'id':\u00a0'3',\u00a0'title':\u00a0'Resistor',\u00a0'price':\u00a078,\u00a0'stock':\u00a045\u00a0},\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\u00a0'id':\u00a0'4',\u00a0'title':\u00a0'Tractor',\u00a0'price':\u00a020000,\u00a0'stock':\u00a01\u00a0},\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\u00a0'id':\u00a0'5',\u00a0'title':\u00a0'Roller',\u00a0'price':\u00a062,\u00a0'stock':\u00a015\u00a0},\u00a0\n\u00a0\u00a0\u00a0 ];\u00a0\n\u00a0 }\u00a0\n}<\/pre>\n\n\n\n<p>In the&nbsp;ngOnInit&nbsp;life cycle hook, we are calling&nbsp;the&nbsp;getPrdoducts() function and assigning&nbsp;the&nbsp;returned data to&nbsp;the&nbsp;products variable&nbsp;so&nbsp;it can be used on the template.&nbsp;There, we are using&nbsp;the&nbsp;*ngFor&nbsp;directive&nbsp;to iterate through&nbsp;the&nbsp;array and&nbsp;display the&nbsp;products. See the code below:&nbsp;&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div\u00a0class=\"container\">\u00a0\n\u00a0\u00a0&lt;br\/>\u00a0\n\u00a0\u00a0&lt;h1\u00a0class=\"text-center\">{{title}}&lt;\/h1>\u00a0\n\u00a0\u00a0&lt;table\u00a0class=\"table\">\u00a0\n\u00a0\u00a0\u00a0\u00a0&lt;thead>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th>Id&lt;\/th>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th>Title&lt;\/th>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th>Price&lt;\/th>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th>Stock&lt;\/th>\u00a0\n\u00a0\u00a0\u00a0\u00a0&lt;\/thead>\u00a0\n\u00a0\u00a0\u00a0\u00a0&lt;tbody>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr\u00a0*ngFor=\"let p of products\">\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td>{{p.id}}&lt;\/td>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td>{{p.title}}&lt;\/td>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td>{{p.price}}&lt;\/td>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td>{{p.stock}}&lt;\/td>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr>\u00a0\n\u00a0\u00a0\u00a0\u00a0&lt;\/tbody>\u00a0\n\u00a0\u00a0&lt;\/table>\u00a0\n&lt;\/div><\/pre>\n\n\n\n<p>With this code,&nbsp;products are rendered in a table as shown in the image below:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/pastedimage1553021925717v12.png\" alt=\" this code,\u00a0products are rendered in a table as shown in the image\" title=\"this code,\u00a0products are rendered in a table as shown in the image\"\/><\/figure>\n\n\n\n<p>Now&nbsp;let\u2019s say&nbsp;we want to add a new column with&nbsp;a button and input box as shown in the image below:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/pastedimage1553021942926v13.png\" alt=\" let\u2019s say\u00a0we want to add a new column with\u00a0a button and input box as shown\" title=\"let\u2019s say\u00a0we want to add a new column with\u00a0a button and input box as shown\"\/><\/figure>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>Our requirements are as follows:&nbsp;&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>If&nbsp;the&nbsp;value of&nbsp;<b>stock<\/b>&nbsp;is more than 10 then&nbsp;the&nbsp;button color should be green.&nbsp;&nbsp;<\/li>\n\n\n\n<li>If&nbsp;the&nbsp;value of&nbsp;<b>stock<\/b>&nbsp;is less than 10 then&nbsp;the&nbsp;button color should be red.&nbsp;<\/li>\n\n\n\n<li>The user can enter a number in&nbsp;the input box, which will be added&nbsp;to that particular stock value.&nbsp;&nbsp;<\/li>\n\n\n\n<li>The color of&nbsp;the&nbsp;button should be updated on the basis of&nbsp;the&nbsp;changed value of&nbsp;the&nbsp;product stock.&nbsp;&nbsp;<\/li>\n<\/ol>\n\n\n\n<p>To achieve this task, let us create a new child component called&nbsp;<b>StockStausComponent<\/b>.&nbsp;Essentially, in the template of&nbsp;<b>StockStatusComponent<\/b>, there is one button and one numeric input box. In&nbsp;<b>StockStatusComponent<\/b>:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>We need to read&nbsp;the&nbsp;value of&nbsp;<b>stock<\/b>&nbsp;passed from&nbsp;<b>AppComponnet<\/b>. For this,&nbsp;we need to use @Input&nbsp;<\/li>\n\n\n\n<li>We need to emit&nbsp;an&nbsp;event&nbsp;so&nbsp;that a function in&nbsp;<b>AppComponent<\/b>&nbsp;can be called on the click of&nbsp;the&nbsp;<b>StockStatusComponent<\/b>&nbsp;button. For this, we need to use @Output and&nbsp;EventEmitter.&nbsp;&nbsp;<\/li>\n<\/ol>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<p>Consider&nbsp;the&nbsp;code&nbsp;below:&nbsp;<\/p>\n\n\n\n<p><span style=\"text-decoration: underline;\"><b>s<\/b><b>tockstatus.component<\/b><b>.ts<\/b><\/span><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import\u00a0{ Component, Input,\u00a0EventEmitter, Output,\u00a0OnChanges\u00a0}\u00a0from\u00a0'@angular\/core';\u00a0\n\n@Component({\u00a0\n\u00a0\u00a0\u00a0 selector:\u00a0'app-stock-status',\u00a0\n\u00a0\u00a0\u00a0 template:\u00a0`&lt;input type='number' [(ngModel)]='updatedstockvalue'\/> &lt;button class='btn\u00a0btn-primary'\u00a0\n\u00a0\u00a0\u00a0\u00a0 [style.background]='color'\u00a0\n\u00a0\u00a0\u00a0\u00a0 (click)=\"stockValueChanged()\">Change Stock Value&lt;\/button> `\u00a0\n})\u00a0\n\nexport\u00a0class\u00a0StockStatusComponent\u00a0implements\u00a0OnChanges\u00a0{\u00a0\n\u00a0\u00a0\u00a0 @Input() stock: number;\u00a0\n\u00a0\u00a0\u00a0 @Input()\u00a0productId: number;\u00a0\n\u00a0\u00a0\u00a0 @Output()\u00a0stockValueChange\u00a0=\u00a0new\u00a0EventEmitter();\u00a0\n\u00a0\u00a0\u00a0 color =\u00a0'';\u00a0\n\u00a0\u00a0\u00a0\u00a0updatedstockvalue: number;\u00a0\n\n\u00a0\u00a0\u00a0\u00a0stockValueChanged() {\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.stockValueChange.emit({ id:\u00a0this.productId,\u00a0updatdstockvalue:\u00a0this.updatedstockvalue\u00a0});\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.updatedstockvalue\u00a0=\u00a0null;\u00a0\n\u00a0\u00a0\u00a0 }\u00a0\n\n\u00a0\u00a0\u00a0\u00a0ngOnChanges() {\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(this.stock\u00a0>\u00a010) {\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.color\u00a0=\u00a0'green';\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\u00a0else\u00a0{\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.color\u00a0=\u00a0'red';\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\u00a0\n\u00a0\u00a0\u00a0 }\u00a0\n}<\/pre>\n\n\n\n<p>Let\u2019s explore&nbsp;the&nbsp;above class line by line.&nbsp;&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In&nbsp;the&nbsp;first line we are importing everything required:&nbsp;@Input, @Output etc.&nbsp;&nbsp;<\/li>\n\n\n\n<li>In the template,&nbsp;there is one numeric input box which is&nbsp;bound&nbsp;to&nbsp;the&nbsp;<b>updatedStockValue<\/b>&nbsp;property using&nbsp;<b>[(<\/b><b><span data-contrast=\"auto\">ngModel<\/span><\/b><b><span data-contrast=\"auto\">)]<\/span><\/b><b>.<\/b>&nbsp;We need to pass this value with&nbsp;an&nbsp;event to the&nbsp;<b>AppComponent<\/b>.&nbsp;&nbsp;<\/li>\n\n\n\n<li>In the template, there is one button. On&nbsp;the&nbsp;click event of the button, an event is emitted to the&nbsp;<b>AppComponent<\/b>.&nbsp;&nbsp;<\/li>\n\n\n\n<li>We need to set&nbsp;the&nbsp;color of the button on&nbsp;the&nbsp;basis of&nbsp;the&nbsp;value of product stock. So, we&nbsp;must use&nbsp;property binding to set&nbsp;the background of the button. The value of&nbsp;the&nbsp;color property is updated in the class.&nbsp;&nbsp;<\/li>\n\n\n\n<li>We are creating two @Input() decorated properties&nbsp;&#8211;&nbsp;<b>stock<\/b>&nbsp;and&nbsp;<b>productId<\/b>&nbsp;&#8211;&nbsp;because value of these two properties will be passed from&nbsp;<b>AppComponent<\/b>.&nbsp;&nbsp;<\/li>\n\n\n\n<li>We are creating an event&nbsp;called&nbsp;<b>stockValueChange<\/b>. This event will be emitted to&nbsp;<b>AppComponent<\/b>&nbsp;on the click of the button.&nbsp;&nbsp;<\/li>\n\n\n\n<li>In the&nbsp;<b>stockValueChanged<\/b>&nbsp;function, we are emitting&nbsp;the&nbsp;<b>stockValueChange<\/b>&nbsp;event and also passing&nbsp;the&nbsp;product id to be updated and&nbsp;the&nbsp;value to be added in the product stock value.&nbsp;&nbsp;<\/li>\n\n\n\n<li>We are updating&nbsp;the&nbsp;value of color property in&nbsp;the&nbsp;ngOnChanges() life cycle hook because each time&nbsp;the&nbsp;stock value gets updated in the&nbsp;<b>AppComponent<\/b>, the&nbsp;value of&nbsp;the&nbsp;color property should be updated.<\/li>\n<\/ol>\n\n\n\n<p>Here we are using&nbsp;the&nbsp;@Input decorator to read data from&nbsp;<b>AppComponent<\/b>&nbsp;class, which happens&nbsp;to be&nbsp;the&nbsp;parent class in this case.&nbsp;To pass data from&nbsp;the&nbsp;parent component class to&nbsp;the&nbsp;child component class,&nbsp;use @Input decorator.&nbsp;&nbsp;<\/p>\n\n\n\n<p>In addition, we are&nbsp;using @Output with&nbsp;<b>EventEmitter<\/b>&nbsp;to emit an event to&nbsp;<b>AppComponent<\/b>. So to emit&nbsp;an&nbsp;event from&nbsp;the&nbsp;child component class to&nbsp;the&nbsp;parent component class,&nbsp;use&nbsp;<b>EventEmitter<\/b>&nbsp;with @Output() decorator.<\/p>\n\n\n\n<p>Therefore,&nbsp;<b>StockStatusComponent<\/b>&nbsp;is using both @Input and @Output to read data from&nbsp;<b>AppComponent<\/b>&nbsp;and emit&nbsp;an&nbsp;event to&nbsp;<b>AppComponent<\/b>.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"modify-appcomponent-to-use-stockstatuscomponent\">Modify&nbsp;AppComponent&nbsp;to use&nbsp;StockStatusComponent&nbsp;<\/h2>\n\n\n\n<p>Let us first modify&nbsp;the&nbsp;template. In the template, add a new table column. Inside the column, the&nbsp;&lt;app-stock-status&gt; component is used.&nbsp;&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div\u00a0class=\"container\">\u00a0\n\u00a0\u00a0&lt;br\/>\u00a0\n\u00a0\u00a0&lt;h1\u00a0class=\"text-center\">{{title}}&lt;\/h1>\u00a0\n\u00a0\u00a0&lt;table\u00a0class=\"table\">\u00a0\n\u00a0\u00a0\u00a0\u00a0&lt;thead>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th>Id&lt;\/th>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th>Title&lt;\/th>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th>Price&lt;\/th>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th>Stock&lt;\/th>\u00a0\n\u00a0\u00a0\u00a0\u00a0&lt;\/thead>\u00a0\n\u00a0\u00a0\u00a0\u00a0&lt;tbody>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr\u00a0*ngFor=\"let p of products\">\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td>{{p.id}}&lt;\/td>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td>{{p.title}}&lt;\/td>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td>{{p.price}}&lt;\/td>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td>{{p.stock}}&lt;\/td>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td>&lt;app-stock-status\u00a0[productId]='p.id'\u00a0[stock]='p.stock'\u00a0(stockValueChange)='changeStockValue($event)'>&lt;\/app-stock-status>&lt;\/td>\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr>\u00a0\n\u00a0\u00a0\u00a0\u00a0&lt;\/tbody>\u00a0\n\u00a0\u00a0&lt;\/table>\u00a0\n&lt;\/div><\/pre>\n\n\n\n<p>We are passing&nbsp;the&nbsp;value to&nbsp;<b>productId<\/b>&nbsp;and&nbsp;<b>stock<\/b>&nbsp;using property binding (remember,&nbsp;these two properties are decorated with @Input() in&nbsp;<b>StockStatusComponent<\/b>) and using event binding&nbsp;to handle the&nbsp;<b>stockValueChange<\/b>&nbsp;event&nbsp;(remember,&nbsp;this event is decorated with @Output() in&nbsp;<b>StockStatusComponent<\/b>).&nbsp;&nbsp;<\/p>\n\n\n\n<p>Next, we need to add&nbsp;<b>changeStockValue<\/b>&nbsp; function&nbsp;in the&nbsp;<b>AppComponent<\/b>.&nbsp;Add the following code in the&nbsp;<b>AppComponent<\/b>&nbsp;class:&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">productToUpdate: any;\u00a0\n\nchangeStockValue(p) {\u00a0\n\u00a0\u00a0\u00a0\u00a0this.productToUpdate\u00a0=\u00a0this.products.find(this.findProducts, [p.id]);\u00a0\n\u00a0\u00a0\u00a0\u00a0this.productToUpdate.stock\u00a0=\u00a0this.productToUpdate.stock\u00a0+\u00a0p.updatdstockvalue;\u00a0\n\u00a0 }\u00a0\n\n\u00a0\u00a0findProducts(p) {\u00a0\n\u00a0\u00a0\u00a0\u00a0return\u00a0p.id ===\u00a0this[0];\u00a0\n\u00a0 }<\/pre>\n\n\n\n<p>In the function, we are using&nbsp;the&nbsp;JavaScript&nbsp;<b>Array.prototype.find<\/b>&nbsp;method to find a product with&nbsp;a&nbsp;matched&nbsp;<b>productId<\/b>&nbsp;and then updating&nbsp;the&nbsp;stock&nbsp;count&nbsp;of&nbsp;the&nbsp;matched product.&nbsp;&nbsp;When you run the&nbsp;application, you\u2019ll&nbsp;get&nbsp;the following output:&nbsp;&nbsp;<\/p>\n\n\n\n<p>When you enter a number in the numeric box and click on the button, you perform a task in the child component that updates the&nbsp;operation value in&nbsp;the&nbsp;parent component. Also, on&nbsp;the&nbsp;basis of&nbsp;the&nbsp;parent component value,&nbsp;the&nbsp;style is being changed in the child component. All this is possible using Angular&nbsp;@Input,&nbsp;@Output, and&nbsp;EventEmitter.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Stay tuned for future articles where we go into more depth on other features of Angular!&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"\/products\/ignite-ui-angular\/download\"><img decoding=\"async\" src=\"https:\/\/static.infragistics.com\/marketing\/Blog-in-content-ads\/Ignite-UI-Angular\/ignite-ui-angular-you-get-ad.gif\" alt=\"Ignite UI for Angular benefits\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unlike AngularJS,\u00a0Angular does not have two-way data binding.\u00a0When I say, Angular doesn\u2019t\u00a0have two-way data binding, it\u00a0does not mean you cannot achieve that. <\/p>\n","protected":false},"author":65,"featured_media":1282,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=736"}],"version-history":[{"count":4,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/736\/revisions"}],"predecessor-version":[{"id":1944,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/736\/revisions\/1944"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1282"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}