見出し画像

Angular : ボタンをクリックすると非表示だった内容が表示される

凸凹のひとりごと

TypescriptとHTMLに記述する

コンポーネントの中のHTML

<!-- ボタンのクリックで質問内容の表示状態をトグルする -->
<button (click)="openQuestion()">Show Question</button>


<!-- 質問内容を表示する部分 -->
<div *ngIf="showQuestion">
  <p>質問内容がここに表示されます。</p>
</div>

コンポーネントの中のTypescript

export class 作ったコンポーネント名Component {

　// 質問内容の表示状態を管理するフラグ
  showQuestion: boolean = false;

  openQuestion() {
　　// ボタンをクリックするたびに表示状態をトグルする
    this.showQuestion = !this.showQuestion;
  }

}


before
after
テンプレだから
シンプルですがCSSやSCSSを使ってデザインをちがう感じに
カスタマイズするのがオススメ！