やろうとしていたこと

画面初期化時に、ある条件を満たした時だけ、チェックボックスを非活性にしたくなった。
しかしながら、チェックボックスは子コンポーネントとして、部品化されていたため、親コンポーネントから値を受け取れるように修正する必要があった。
その方法について紹介します。
この方法であれば、親コンポーネントごとに設定できるので、親コンポーネント同士で影響がありません。

子（checkbox.component）

　
クラス

@Input()
fromParent:boolean = false;

テンプレート

<input type="checkbox" [disabled]="fromParent">
</input>

親（page.component）

クラス


disabledFlg: boolean　 = false;

ngOnInit(){
  this.changeDisabled();
}

changeDisabled(){
 if(someCondition){
  //特定の条件を満たしたら、trueをセット。
   disabledFlg = true;
 }
}

テンプレート

<app-checkbox [fromParent]="disabledFlg"></app-checkbox>