如何在角度6组件中将API响应作为@Input参数传递

Question

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'?

Answer 1

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>

Answer 2

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 ie 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.

Answer 3

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