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