Angular 9 ngOninit дочернего компонента вызывается дважды

Question

Используя Angular 9, у меня есть дочерний компонент, в котором функция ngOnInit вызывается дважды. В первый раз некоторые из @Inputs не определены, а во второй раз все @Inputs правильно инициализированы. Компонент отрисовывается во второй раз.

Вот настройка: родительский компонент вкладывает дочерний компонент. Мы используем логический флаг foobarDataReady для управления инициализацией компонента foobar. Впоследствии я добавил проверку для viewName - это @Input, который не определен при первом вызове ngOnInit.

<div *ngIf="foobarDataReady && viewName>
   <foobar #foobarForm [ctxObject]="ctxObject" [typeName]="'Dog'" [viewName]="'DogView'" </foobar>
</div>

Вот компонент foobar:

export class FooBarComponentimplements OnInit {

  @Input() public viewName: string;
  @Input() public typeName: string;
  @Input() public ctxObject: any;

  constructor() {}
  ngOnInit() {
     console.log("ngOnInit ctxObject", this.ctxObject);
     console.log("ngOnInit typeName", this.typeName);
     console.log("ngOnInit viewName", this.viewName);
  }

Компонент запускается следующим образом:

When foobarDataReady is true:
   ngOnInit 1
      - ctxObject is populated
      - typeName is populated
      - viewName is undefined
      - Component does not render but no errors
   ngOnInit 2
      - ctxObject is populated
      - typeName is populated
      - viewName is populated 
      - Component renders

Есть идеи? typeName и viewName являются константами, они определяются и устанавливаются одинаково. Даже с viewName в условии ngIf для компонента, он все еще не определен при первом вызове, если ngOnInit.

Есть идеи, как я могу отладить это? Я искал искаженный код и выполнил трассировку отладки через javascript с помощью Chrome DevTools, не замечая ничего странного