Click here to Skip to main content
15,885,729 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have been redirected to another page like this

this.router.navigate(['prob/telecomnewdeal'], { queryParams:{ 'companyId': this.selectedCompnay, 'domainId':this.domainId } });


on new page
ngOnInit
i am getting params like this

ngOnInit(): void {
   this.route.queryParams.subscribe(params => {
     this.companyId = +params['companyId'];
     this.domainId = +params['domainId'];
   });


and then i am calling a API in ngOint like this
this.telecomDealService.addNewDeal(this.userEmail, false, this.companyId, this.domainId).subscribe((data: TelecomDealList) => {

       this.dealQuestionsList = data.AssginedTowers[0].Questions;
       let test = this.dealQuestionsList[0].IsHeader
       this.addloadded = true;
       console.log(this.addloadded);
       for (var i = 0; i < data.AssginedTowers[0].Questions.length; i++) {
         if (data.AssginedTowers[0].Questions[i].listAnswerOptions != null) {

           this.drpoption = data.AssginedTowers[0].Questions[i].listAnswerOptions;
           this.dealQuestionsList[i].listAnswerOptions = [];
           for (var j = 0; j < Object.entries(this.drpoption).length; j++) {
             let tempfilter: Item;
             tempfilter = {
               text: Object.entries(this.drpoption)[0][0],
               value: Object.entries(this.drpoption)[0][0]
             };

             this.dealQuestionsList[i].listAnswerOptions.push(tempfilter);
           }

         }
       }


       this.spinner.hide();




       });


but my HTML loads the data before i am getting data from my API

how to load the HTML after getting the data from API

What I have tried:

not able to understand the concept
Posted

1 solution

I appreciate that this is an older question but it is well worth addressing why there is a problem here. The poster has stated that they want to wait until data has been returned from an API and then load the HTML of a particular page. Technically you would think this is possible by making the call to retrieve the data a blocking synchronous call, but that is not possible in a JavaScript application due to it being single threaded system. The API call is, effectively, a promise to get data from a server in a response, which can then be acted on.

So, now that we know that the page is asynchronous, how do we hide the content on the page until the data is returned. A typical mechanism is to use a loaded variable, which only gets set to true when the dat is returned. Then, simply use ngIf to display the data when loaded is true.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900