how to set prop child to parent in Angular?

Question

I work on the team who using Angular, I was using Vue before, I have learned the Angular 7 so far for 5 days, and my team still using Angular 4, I want to know how to set up the prop in child to parent? I usually in Vue use Prop in components so, I can use it on other component and set the data of Prop, but in Angular, I don't know how to use it (thought I have learned it so far and still not sure how to binding in the correct way) and is it possible ??

I want to make a loader component in this Angular component, but I want to make it reusable to set up the width and height of the loader on another component, how to do this in Angular ??

let say I want to fetch data and then wait for it while showing a loader

like this :

<div>
   <app-loader *ngIf="show == 'true'" [setupWidhtLoader]="is-That-Possible-to-Set-Up-Here?"> </app-loader>
   <h2> {{ data.full_name  }} </h2>
</div>

should i use it on loader component? any example ? @ExplosionPills — Zum Dummi, May 17 '19 at 17:30
Possible duplicate of [Pass data from child to parent component Angular2](https://stackoverflow.com/questions/42107167/pass-data-from-child-to-parent-component-angular2) — Heretic Monkey, May 18 '19 at 02:15

score 1 · Accepted Answer · answered May 17 '19 at 17:49

To pass data from the child component to the parent via an event, use the @Output() decorator. See the docs for more details. An example is shown below:

Parent HTML component:

<app-loader (dataChange)="handleDataChange($event)"></app-loader>

Parent TS component:

public handleDataChange(event){
  //Do something here
}

Child TS component:

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

You can also pass data back and forth between the parent and child component using two-way binding. When the value is changed in one location, it will automatically be changed in the other. Syntax is as follows:

<app-loader [(width)]="parentWidth"></app-loader>

Where parentWidth is a property on the parent and width is a property on the child decorated with @Input() and widthChange is an EventEmitter property of the child decorated with @Output().

If you want to share data between these two components and potentially others, you can create a shared service. This is probably a little overkill for your situation.

i see that, now i get some error, i want to use that child component in my current component, it not going trigger :( — Zum Dummi, May 17 '19 at 17:58

how to set prop child to parent in Angular?

1 Answers1