-1

1.showing a loader until API resolvers 2. After a getting API response, setting the loader flag to false, and trying to read the div inside flag 3. Flag value is updated but dom is not refreshed, so i dont have reference to a div inside a if condition

Why dom is not refreshed here..

Code - https://stackblitz.com/edit/reactive-form-validation-angular-15-zgnf3n?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Findex.html,src%2Fapp%2Fapp.module.ts

2727
  • 39
  • 1
  • 7
  • You really should include the code in question here instead of just a link to an external site. Having the stackblitz example is an excellent way to provide a working example, but shouldn't be the bulk of your question. – peinearydevelopment Mar 24 '23 at 13:16
  • I’m voting to close this question because the code in question isn't included on SO, but rather a link to StackBlitz – peinearydevelopment Mar 24 '23 at 13:17

1 Answers1

0

A constructor shouldn't have async code in it. There are ways to get it to work, but Angular provides various lifecycle events that should be utilized instead.

ngAfterViewInit would be my recommendation here as follows:

{{ !showLoader }}
<ng-container *ngIf="!showLoader ? widget : loaderMsg"></ng-container>
<div #widget></div>

<ng-template #loaderMsg> Loading... </ng-template>

import { HttpClient } from '@angular/common/http';
import {
    AfterViewInit,
  Component,
  ElementRef,
  ViewChild,
} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  showLoader = true;
  @ViewChild('widget', { static: false }) widget: ElementRef;
  API_KEY = '{{YOUR_API_KEY}}';

  constructor(private httpClient: HttpClient) {}
  async ngAfterViewInit(): Promise<any> {
    await this.loadDashboard();
  }

  async loadDashboard() {
    this.showLoader = true;
    const isInitalDataFetched: any = await this.getValue().catch(() => {
      return false;
    });
    console.log('test', isInitalDataFetched);
    if (isInitalDataFetched) {
    } else {
      this.showLoader = false;
      // this.cdr.detectChanges();
      console.log(this.widget);
    }
    console.log('test');
    console.log(this.widget);
  }

  getValue() {
    return this.httpClient
      .get(
        `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${this.API_KEY}`
      )
      .toPromise();
  }
}

The docs on AfterContent hooks explain that content 'children' aren't available until one of these hooks.

Stackblitz

peinearydevelopment
  • 11,042
  • 5
  • 48
  • 76
  • Even with oninit also it wont have reference to widget. if we check on console , it shows undefined. – 2727 Mar 24 '23 at 13:21
  • Please update your question to 1. Include your code. 2. Clearly state a question. Based on the title, you are asking about async/await. With the code in Stackblitz, your code isn't utilizing async/await all the way through as you can't await a function call in the constructor. – peinearydevelopment Mar 24 '23 at 13:24