ボタンを使ってHTML内の要素を表示・非表示にしたいと思っています。タイプスクリプトではbooleanを使い、HTMLでは*ngIfを使わなければならないことはわかっています。
私のタイプスクリプトには、ブーリアンがあります。
showHide: false;
私のHTMLでは、次のようになっています。
<button (click) = "showHide=true" </button>
これを使って要素を隠しています。私は隠したい要素に*ngIf="showHide"を使って要素を隠します。
しかし、非表示にした要素を同じボタンで戻すにはどうしたらいいでしょうか?
ボタンをクリックするたびにshowHideをtrueにするのではなく、関数を使ってtrueからfalse、またはその逆に変更することができます。
そのためには、showHideの値を変更するchangeShowStatusのような関数を作成する必要があります。
changeShowStatus(){
this.showHide = !this.showHide;
}
そして、ボタンを押すたびに、showHide=trueをchangeShowStatus()に変更して、この関数を呼び出します。
<button type="button" (click)="changeShowStatus()">show/hide</button>
初期状態を設定するには、コンストラクタで showHide 値を設定し、showHide を単にブール値として定義します。
export class App {
...
showHide: boolean;
constructor() {
this.showHide = true;
}
...
}