Angular passing boolean value from parent Stepper to child step-CodePudding

I have an Angular Material stepper component with children steps. How can I pass the boolean value isNewProposal to the children? My usage of @Input() isn't working here as the boolean comes back undefined on the children, after being assigned true or false in the parent.

Parent Component:

<mat-horizontal-stepper [selectedIndex]=currentStepIndex [isNewProposal]="isNewProposal" (selectionChange)="selectionChanged($event)" [linear]="true" labelPosition="bottom">
        <mat-step [completed]="step.completed" *ngFor="let step of steps; let i = index" [label]="step.name">
            <router-outlet *ngIf="i === currentStepIndex"></router-outlet>
        </mat-step>
    </mat-horizontal-stepper>

  isNewProposal: boolean;

  async ngOnInit() {
   if (someCondition)) {
      this.isNewProposal= true;
    } else {
      this.isNewProposal= true;
    }
  }

Child component:

  @Input() isNewProposal;

  ngOnInit(): void {
    const invalidate = this.isNewProposal //always undefined;
  }

CodePudding user response：

Try using @Input() isNewProposal!: boolean | boolean;

and use it instead invalidate

CodePudding user response：

Try using OnChanges on your child component - that way you can be sure to only check the @Input()'s value once the parent has successfully proved a value