Pass data between components using @Output,@Input and EventEmitter in angular

inputoutpt.png

In Angular, we can use any component inside other component. Here the component which is used inside other component is called as child component and the main component is called as parent component. Let’s say for example I am creating two components 1) products.component and 2) sidebarfilter.component.

I had created product.component to display all the available products and sidebarfilter.component to provide filter options to user. Now In my case I want to pass the searchterm/value that is entered in input box of sidebarfilter.component to products.component. and in other case I want to pass some value from product.component to sidebarfilter.component.

In short in this tutorial I will show “how components can communicate with each other” using @input,@output and EventEmittter.

There are certain ways from which component can communicate with each other

  • @Input
  • @Output
  • Services

I will show, how it can be done using @Input,@Output and Event Emitter.

Backend:

Script file for Database

And I had created backend using node.js which can be downloaded from here.  don’t forget to run npm install to download all the dependencies from the package.json

Keep in mind before fetching the data in angular your back end server must be on.( i.e. your node js application should be on). To run node.js application navigate to directory and write npm start.

Table created using script file,back end project downloaded from git hub link so now it is all set to start with fetching data in angular.

Frontend:

I am using angular-cli to generate the project. To start with first I had created one class to store the products. This product class contains following fields.

After creating class I will required a service which will fetch data from our backend.

In service I had imported HTTP and respone from @angular/http and also imported rxjs/Rx for observables. I had created one variable and named it as url which will store the url of backend. I had created one method getAllProduct which is using get method of http in fetching data from database. Now as services are Injectable I can call getAllProduct from any component which is injecting this service.

now simple I want to display allProducts, so I am creating a component names as products.component

products.component.html

products.component.ts

Here in above code I am injecting the service and importing class which created previously then on ngOninit method I am calling getAllProduct method and on subscribe method I am fetching all the product in allProduct array and on html I looping through the allProduct array to display all the products.

Screenshot (141).png

It is simple!! Isn’t it?  But now I want to create one more component and named it as sidebarfilter.component  ,which I will used inside products.component as shown below.

Screenshot (142)_LI.jpg

Now I want to communicate between this two component i.e. sidebarfilter.component and products.component.

Means I want to pass name of the category from products.component => sidebarfilter.component and value of inputbox of sidebarfilter.component => products.component as shown in above in figure.

  • Passing value from products.component – > sidebarfilter.component

It can be done simply by declaring the result variable as shown below

@Input() result:string=””;

@Input can be imported from @angular/core

By declaring variable as @Input we can set it’s value from any other component as shown below

 

It should be written on products.component.html 

  • Passing value from sidebarfilter.component – > products.component 

Now in this case I want to pass the value of inputbox to products.component on click of Search button , So here I am creating custom event and emit that event using EventEmitter .

We can create custom event which can called from other component with the help of @output and EventEmitter both can imported from @angular/core.

@Output() clicked=new EventEmitter();

Here is the full source code of sidebarfilter.component

Sidebarfilter.component.html

Sidebarfilter.component.ts

Here in above component I am passing the value of inputbox to onClick method on (click) event with the help of template binding (#input1) , and onClick method will emit my custom event clicked and pass the value to products.component.ts and also I am displaying the {{result}} in h1 tag ,which can be set be products.component.

products.component.html

products.component.ts

So here in above code I am using sidebarfilter.component as shown below,

 

And I am passing the value to result which will be bind on sidebarfilter.component and also I am calling custom event of sidebarfiltercomponent  clicked ,which is not html’s event from products.component and performing the filter operation based on value.

Screenshot (143).png

Conclusion:

Source code

In this tutorial ,I gave demo of how component can talk/communicate to each other using @Input,@Output and EventEmitter.

Hope it will be helpful to you.

Thanks for reading.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s