I'm encountering a frustrating issue where the page loads before the data is retrieved. When I log the names in $(document).ready(), everything appears correct without any errors in the console. However, the displayed html remains empty and only shows the correct data upon refreshing the page.
Below is an excerpt from my component.ts file:
import {Component} from '@angular/core';
import {DataService} from '../../services/data.service';
import {ActivatedRoute, Router} from '@angular/router';
import * as $ from 'jquery/dist/jquery.min.js';
import 'jquery-ui/jquery-ui.min.js';
declare let jQuery: any;
@Component({
selector: 'user-header',
templateUrl: '../../templates/plan/header.html',
})
export class HeaderComponent {
data;
selectedCompany;
selectedPlace;
constructor(private dataService: DataService,
private router: Router,
private route: ActivatedRoute) {
// Code to retrieve and select company/place data
const self = this;
$(document).ready(function () {
console.log('selectedCompany', self.selectedCompany.name);
console.log('selectedPlace', self.selectedPlace.name);
});
}
Here is a snippet from my template (html) file:
<li class="dropdown">
<select [(ngModel)]="selectedCompany" (change)="selectCompany()" id="company-select">
<option *ngFor="let company of data.companies" [ngValue]="company">
{{ company?.name }}
</option>
</select>
</li>
<li class="dropdown">
<select [(ngModel)]="selectedPlace" (change)="selectPlace()" id="place-select">
<option *ngFor="let place of selectedCompany.foodHandlingPlaces" [ngValue]="place">
{{ place?.name }}
</option>
</select>
</li>
If you have any suggestions on how to make the html wait for the data before rendering, please feel free to share!
Thank you for your help!