angular child rendering before parent data is received

I have a parent component (app.component) making an http request, assigning the result as this.stats then passing it as a prop to the child (progression.component). my issue seems to be that my child is rendering before it gets any data from the parent causing the child to throw errors and break.

i.e I'm getting -> {} [[Prototype]]: Object when I log the prop in my child component

I'm just inexperienced but since all my components use ngOnInit() and are subscribed to observables I assume the child should be waiting on the parent to finish? I'm not sure how I can fix something like this since it exists accross components and isn't a case where I can merge the observables I would think.... any insight would be awesome :) thank you!!

parent component

export class AppComponent {
  title = 'pctothemoon';
  stats: any

  
  constructor(private specsService: SpecsService) {}

  ngOnInit(): void {
    this.specsService.getStats().subscribe((res)=>{this.stats=res})
    }

}

child component

export class ProgressionComponent {
  @Input() stats: any;
  oldStats: any;
  constructor(private specsService: SpecsService) { }

  ngOnInit(): void {
    this.specsService.getProgress().subscribe((res)=>{console.log(res)})
    }

    AfterViewInit(){
      this.specsService.postUpdates(this.stats).subscribe((res)=>{console.log("updated stats", res)})
    }
}

for reference I'll also include my service.ts to show my http requests in the background

export class SpecsService {
  private apiUrl = 'http://localhost:3000'
  constructor(private http:HttpClient) {}


  getStats():Observable<any>{
    return this.http.get(`http://localhost:8888/fetchStats`)
 }

postUpdates(stats):Observable<Object>{
  //send stats to json server store
  const url = `${this.apiUrl}/progressionData`; //json server collection location
  return this.http.post(url,stats,httpOptions) + stats 
  
}
getProgress(){
  return this.http.get(`${this.apiUrl}/progressionData`)
}

}

The answer is very simple. Simply wrap the child component inside an *ngIf in your HTML:

<ng-container *ngIf="!!stats">
  <app-child-component [stats]="stats"></app-child-component>
</ng-container>

The condition will be that the data the child needs is available. Here, the child component will not be created until the data is available.

NB: In newer versions of Angular there's a new syntax for if statements although the old *ngIf syntax works too