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)

========================

  ========================

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.

Array output



Source link

Write A Comment