Within my Angular application, I encountered an issue involving a parent component named DepotSelectionComponent and its child component SiteDetailsComponent. The problem arises when an event called moreDetails is emitted to the parent component, triggering the getDetailsPage() function which changes the page using ngswitch and loads some data. However, the component I am attempting to load appears to be undefined, causing the references to that component not to work via the ViewChild decorator in the view.
The root cause seems to be related to the behavior of the ngswitch, but despite my attempts to fix it by adding timeouts, the issue persists. While the populateResults function works due to the preloaded component, the populateDepotResults function fails as the component remains undefined and unloaded by the switch process.
HTML code snippet from parent (DepotSelectionComponent):
<div class="main">
<div [ngSwitch]="page">
<div *ngSwitchCase="'siteLandingPage'">
<div class="interactiveMap">
<app-interactive-map (siteDetailTable)="populateResults($event)"></app-interactive-map>
</div>
<div class="mapResult">
<app-map-result (moreDetails)="getDetailsPage($event)"></app-map-result>
</div>
</div>
<div *ngSwitchCase="'siteMoreDetails'">
<div>
<button mat-raised-button (click)="home()">Back</button>
</div>
<div class="clearFloat"></div>
<app-site-details [siteDetailsar]="siteDetailsar" (depotMoreDetails)="depotMoreDetails($event)"></app-site-details>
</div>
<div *ngSwitchCase="'depotMoreDetails'">
<div>
<button mat-raised-button (click)="getDetailsPage()">Back</button>
</div>
<div class="clearFloat"></div>
<app-depot-parent></app-depot-parent>
</div>
</div>
</div>
Typescript code segment from parent (DepotSelectionComponent):
import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
// Other imports omitted for brevity
@Component({
selector: 'app-depot-selection',
templateUrl: './depot-selection.component.html',
styleUrls: ['./depot-selection.component.scss']
})
export class DepotSelectionComponent implements OnInit {
// Class attributes and functions defined here...
}
HTML code snippet from child (SiteDetailsComponent):
<div class="siteInfo">
<!-- Content goes here -->
</div>
<div class="depotLocations">
<!-- More content goes here -->
</div>
Typescript code segment from child (SiteDetailsComponent):
import { Component, OnInit, ViewChild, Output, EventEmitter, Input } from '@angular/core';
// Other imports omitted for brevity
@Component({
selector: 'app-site-details',
templateUrl: './site-details.component.html',
styleUrls: ['./site-details.component.scss']
})
export class SiteDetailsComponent implements OnInit {
// Class attributes and functions defined here...
}