Here I am going to show you a basic example of event emitter with Angular 7. Here it goes.
The app component is the parent component. It has two child components.
- my-comp -> used to insert the data into an array using event emitter
- my-comp2 –> used to fetch the data in the array using event emitter decorator.
my-comp.component.html (Contains the input Forms and submit button)
========================
========================
my-comp.component.ts
See the Event emitter is created here.
In the app-component.ts (Mother Component)
In the app-component.html
Please make sure the event name userArrayOut exactly matches with the below.
@Output() userArrayOut = new EventEmitter();
Here in child component (my-comp), the data is populated in the userArrayOut array.
Then in mother app-component.ts, it is stored in the userArray variable. After that in the app-component.html file, it is again stored in the users array. See the 2nd line in app-componnet.html.
Now the data insertion into the array is completed. Here goes the way to show the data in the other component.
my-comp2.component.ts
=====
Just add the @Input decorator users array. Now the user array is filled with data.
Now, print the data in the my-comp2 component by iterating users array.
my-comp2.component.html
=====
That is it. Once you fill the information and click on the submit button, the array will be loaded and printed as below.