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. 

  1. my-comp -> used to insert the data into an array using event emitter
  2. 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)




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.



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.



That is it. Once you fill the information and click on the submit button, the array will be loaded and printed as below.

Array output

Source link

Write A Comment