how to bind the view after getting the data from API in angular

user_5604043 0
Viewed 316

I have a component as shown below

<app-data-table  [headerDataList]=headerDataList 
            [dataList]=gradeDetailsList></app-data-table>

gradeDetailsList is the data list which is got from the API

getAllGradeDetails() {
        this.gradeDetailsService
            .getBulkGradeDetails()
            .subscribe((data: any) => {
                console.log(data);
                this.gradeDetailsList = data.reverse();
            });
    }

the view is render before the API returns the data is there a life cycle method i can use to bind the view once i get the data

angularjs datatables api database
1 Answers

Good Question.

Yes, there are different ways you can fetch data before integrating view

First Way : Before navigating routes, you can fetch data using Angular Resolve Guard. Link that may help you: https://www.tektutorialshub.com/angular/angular-resolve-guard/

Second Way: You can set a flag condition in the component element. suppose set isDataLoaded false initially and it becomes true when the API have success response and set the data in the "this.gradeDetailsList" variable.

Third Way: Put a loader and same as variable, initially make loader to true and when data is loaded then loader is set to false, so after loading all the data, loader will be false and disappear and you will get table with loaded data. You can use and for the loader and set condition accordingly.

Link: https://stackblitz.com/edit/angular-bx37fj?file=src/app/progress-spinner-overview-example.ts

Hope, it may help you to move further in your problem..

user_120777390
Related