[EN] Angular Sharing Data Between Components ( Input, Output)

Angular is comprehensive, and it present us many options. We choose INPUT and OUTPUT for about sharing data between components today. Instead of write long, let’s explain this to simple project.

We start to create a new Angular project.

ng new angular-data-sharing

I think primeng components so usefull. For this reason, I always import to my all projects. If you want to more information about primeng, you can examine this documentation.

Our simple project will include a form. We will select data when income another components and share data.

ng g component hobies-form
ng g component data-table

And we’ll configure related components for routing.

We describe a dialog in data-table component. And this dialog will be used for show method by parent component. We describe 3 default list about sports. Our method will decide which type sports to list with the given parameter.

We describe a reactive form in hobies-form component. And a button too for show method to child component.

After this point, We describe ‘event emitter’ with OUTPUT in data-table component.We will share data to hobbies-form component and trigger it with event emitter.We use selection property of PrimeNG data table.

@Output() public sendHobbie: EventEmitter<any> = new EventEmitter<any>();

We describe a function for catch the data in hobbies-form component.We will set the form by type property in data.

We see output usage. Now, we will share the form data and display it from another component.

ng g component display-data

We describe a property without type definition inside component.

@Input() public profile: any;

We organize template. And we call display-data component while send form data inside hobbies-form component.

RESULT :

If you want examine to details, you can visit my github repositories.