Chartjs-Send data from a form to another component of the same level -angular

by

1👍

✅

I’ll try to be as brief as possible:

There are many ways you can communicate between components. The ones that you mentioned (using the @Input() and @Output decorators) are basically as follows:

@Input() – receives data from parent

This is as simple as it gets. You pass data to the child component like so:

<!-- one-way binding - value moves from the parent to child -->
<app-custom-component [childVar]="parentVar" ></app-custom-component>

And declare it in the child component’s .ts like so:

// you will have to import Input from @angular/core
@Input() childVar: string;

@Output() – sends data to parent

It behaves just like an event. In fact, it is an event:

// import Output and EventEmitter from @angular/core as well
@Output childChange: new EventEmitter<string>();

Then the parent has to listen to it:

<!-- the $event carries the content you want to grab -->
<app-custom-component2 (childChange)="parentDoesSomething($event)"></app-custom-component2>

Docs here.

With this, you can receive data from one component in the parent and send it to another. There are other ways you can communicate between components, like with services.

Actually, take a look at this article. It covers a lot of stuff.

Example using @Input() and @Output()

I made a quick little example in StackBlitz. Check it out in case you’re having trouble implementing it.

Leave a comment