How to pass API response as @Input parameter in angular 6 component

2
votes

I have two components as "new" and "history". history component is called inside "new" component as follows,

<div class="col-lg-12">
   <app-leave-history [LeaveData]="ldata" [RoleData]="permission"></app-leave- history>
</div>

above is inside "new" component. i need to pass data to 'ldata' property from "new" component ts file. when i pass data to 'ldata' with API response, component doesn't get data. because before the API response, history component get loaded. should i call the API inside the history component or is there any way to call API from my "new" component and pass to 'ldata'?

3
angularapiangular6
why did you remove the answer? - Sajeetharan
i added the answer at the below. - vishwa

3 Answers

2
votes

Use *ngIf to wait for the API call to get complete and initialize ldata. Angular will wait for it and then only render app-leave-history

 <div class="col-lg-12">
   <app-leave-history 
     *ngIf="ldata && permission" 
     [LeaveData]="ldata" 
     [RoleData]="permission">
   </app-leave-history>
</div>

Suggestion: Please consider renaming ldata, LeaveData and RoleData to camelCase i.e. lData(or leaveData to be clearer), leaveData and roleData. This is something that Angular StyleGuide Suggests:

Do use lower camel case to name properties and methods.

2
votes

As @SiddAjmera & @Sajeetharan suggested *ngIf part added and additionally i assigned the response in ngOnChanges() event. Now it works !!!

1
votes

The approach you are doing is correct, you make the API call in the new component and assign the response.

Pass the response as a input to the new component. Inorder to pass the data once it is recieve you can render the history component using *ngIf

<div class="col-lg-12">
   <app-leave-history *ngIf="ldata && permission" [LeaveData]="ldata" [RoleData]="permission"></app-leave- history>
 </div>