Angular 7/6 | Share Data between Components Using @Input Decorator

Angular’s best feature is component. We can divide different modules into a number of components. Where each component having its own responsibility to perform. But, sometimes these components may need to communicate with each other and share data having each other’s dependencies.

In this post, we will discuss a simple example app which will share data between components using @Input() Decorator. @Input() decorator will allow passing data in the defined template.

What we’ll build

This sample application is having mock data of parents and their children bound to parent ID. We can select parents from the drop-down to see their children. As we are demonstrating @Input decorator, we will pass children data as a parameter in the Child template.

 

Our application will have:

1) Two components: parent.component.ts and child.component.ts
2) Two data models: child.ts and parent.ts
3) Two Mock data files: mock-parents.ts and mock-children.ts
4) One service to get data from mock data files
5) We also use bootstrap 4 module to use the drop-down.

See working example here.

Following will be the directory structure:

 

Find Source Code on Github

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of