¿Cómo esperar la carga de HTML hasta obtener datos en angular?

Me han redirigido a otra pagina como esta.

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

en nueva pagina

ngOnInit

estoy obteniendo parámetros como este

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

y luego estoy llamando a una API en ngOint como esta

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();




       });

pero mi HTML carga los datos antes de obtener datos de mi API

cómo cargar el HTML después de obtener los datos de la API

Lo que he probado:

no puedo entender el concepto

Solución 1

Aprecio que esta sea una pregunta anterior, pero vale la pena abordar por qué hay un problema aquí. El cartel ha declarado que quieren esperar hasta que se hayan devuelto datos de una API y luego cargar el HTML de una página en particular. Técnicamente, se podría pensar que esto es posible haciendo que la llamada para recuperar los datos sea una llamada síncrona de bloqueo, pero eso no es posible en una aplicación JavaScript debido a que es un sistema de un solo subproceso. La llamada API es, efectivamente, una promesa de obtener datos de un servidor en una respuesta, sobre la cual luego se puede actuar.

Entonces, ahora que sabemos que la página es asincrónica, ¿cómo ocultamos el contenido de la página hasta que se devuelvan los datos? Un mecanismo típico es utilizar una variable cargada, que sólo se establece en verdadero cuando se devuelve el dat. Luego, simplemente use ngIf para mostrar los datos cuando la carga sea verdadera.