I have a parentComponent called dashboardComponent. This contains a table.

When selecting a row in that table I display it's subcomponent, which is companyAdmin, and I pass the rowID to it.

CompanyAdmin on it's turn contains 4 subComponents. The task of the companyAdminComponent is to do a GET request with the rowId it received from it's parentComponent, the dashboardComponent. Then send distribute that data to it's 4 subComponents.

The problem I am having is, this is all on 1 page and so can't use a resolver. So when I am rendering the subComponent of companyAdminComponent it crashes as it didn't receive the data back yet from the GET request. and getting the error

Cannot read property 'name' of undefined

So basically how do I show the subComponent of companyAdmin, only after the data has been loaded.

The code

dashboard.html (Parent component)

Only showing the relevant code for brevity

// ap-company-admin only is being shown when a row is selected in the table

 <div class="row extraRowSpace" *ngIf="companySelected">
      <div class="col-xl-12">
           <ap-company-admin [companyId]="company.id"></ap-company-admin>
      </div>
  </div>

CompanyAdmin HTML (subComponent of dashboardComponent)

<ap-company-details [companyDetails]="companyDetails"></ap-company-details>

CompanyAdminComponent TS (subComponent of dashboardComponent)

    ngOnInit() {
        this.companyService.getAllCompanyDetails(this.companyId).subscribe(
            response => {
                this.allCompanyDetails = response;

                this.companyDetails = {
                    cardsName: this.allCompanyDetails.cardsName,
                    name: this.allCompanyDetails.name
                };
            }
        );
    }

CompanyDetailsComponent (subComponent of companyAdminComponent)

@Input() companyDetails;
companyName: FormControl;
cardsName: FormControl;

ngOnInit() {
    this.companyName = new FormControl(this.companyDetails.name);
    this.cardsName = new FormControl(this.companyDetails.cardsName);
    // Basically it is crashing here because on init of this component the data of companyDetails hasn't come back yet from the GET call
}

All the things I found are things to do with resolver, but as I am not navigating but only show and hiding the companyAdminComponent when selecting a row, I don't think I can do this with a resolver. Any advice?