Angular 6 - Data not loading on page load

[supra97]

I’m loading data from a url, however it does not display until there is a user event (mouse click or key press).

My service:

@Injectable({ providedIn: 'root' })
export class DealerService {

  private dealersUrl = 'https://demo8261229.mockable.io/';  // URL to web api

  constructor(private http: HttpClient) { }

  /** GET data from the server */
  getDealers(): Observable<Dealer[]> {
    return this.http.get<Dealer[]>(this.dealersUrl)
  }

My app component:

import { Component, ChangeDetectorRef, OnInit } from '@angular/core';
import { Okta } from './shared/okta/okta.service';
import { DealerService } from './dealer.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  user;
  oktaSignIn;

  constructor(private okta: Okta, private changeDetectorRef: ChangeDetectorRef, private dealerService: DealerService) {
    this.oktaSignIn = okta.getWidget();
  }

  showLogin() {
    this.oktaSignIn.renderEl({el: '#okta-login-container'}, (response) => {
      if (response.status === 'SUCCESS') {
        this.user = response.claims.email;
        this.oktaSignIn.remove();
        this.changeDetectorRef.detectChanges();
      }
    });
  }

  ngOnInit() {
    this.oktaSignIn.session.get((response) => {
      if (response.status !== 'INACTIVE') {
        this.user = response.login;
        this.changeDetectorRef.detectChanges();
      } else {
        this.showLogin();
      }
    });
  }

  logout() {
    this.oktaSignIn.signOut(() => {
      this.user = undefined;
      this.changeDetectorRef.detectChanges();
      this.showLogin();
    });
  }
}

App.component.html

    <div *ngIf="!user" id="okta-login-container">
      <app-login></app-login>
    </div>

    <div *ngIf="user">
      <div>
        <button class="logout_button" (click)="logout()">Logout</button>
        <app-header></app-header>
        <app-dealers></app-dealers>
      </div>
    </div>

My component
import { Component, OnInit, Input } from ‘@angular/core’;
import { DealerService } from ‘…/dealer.service’;
import { Dealer } from ‘…/dealer’;

@Component({
  selector: 'app-dealers',
  templateUrl: './dealers.component.html',
  styleUrls: ['./dealers.component.css']
})
export class DealersComponent implements OnInit {
  public dealers = [];
  
  constructor(private dealerService: DealerService  ) { }

  ngOnInit() {
    this.getDealers();
  }
  
  getDealers(): void {
    this.dealerService.getDealers()
    .subscribe(data => this.dealers = data);
    console.log(this.dealers);
  }
}

I think it has something to do with the *ngIf statement in the app.component.html.

[supra97]

Well, I figured it out, in case anyone else runs into the same issue.
Added a detectChanges method on my subscription.

getDealers(): void {
    this.dealerService.getDealers()
      .subscribe(
        (data) => {this.dealers = data;
        this.isLoading = false;
        this.changeDetectRef.detectChanges();
        },
        (error) => {
          alert(error.message)
        }
      )