【Angular】ngIfと表示フラグを使ってボタンを表示・非表示にする方法

2022年7月17日2026年8月11日

当ページのリンクには広告が含まれています。

Angularでは、*ngIfを使って表示したい画面を制御できます。

例えば、ゴールド会員だった場合にボタンを表示するといった仕様を見てみましょう。

以下のようにisGoldMemberがfalseの場合はゴールド会員のボタンは非表示、isGoldMemberがtrueの場合はゴールド会員のボタンを表示するようにします。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-t3',
  templateUrl: './t3.component.html',
  styleUrls: ['./t3.component.css']
})
export class T3Component implements OnInit {
  public isGoldMember: boolean = false;

  constructor() { }

  ngOnInit(): void {
    this.isGoldMember = true;
  }

}

*ngIf=”isGoldMember”とすることで、isGoldMemberがtrueの場合、ゴールド会員のボタンが表示されるようになります。

<div class="member">
    <div>会員情報を表示</div>
    <div class="button-field">
        <button>一般会員</button>
        <button *ngIf="isGoldMember">ゴールド会員</button>
    </div>
</div>

また、isGoldMemberの初期値はfalseなので、以下のようにisGoldMemberがtrueになる処理がなければ、ゴールド会員のボタンも表示しません。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-t3',
  templateUrl: './t3.component.html',
  styleUrls: ['./t3.component.css']
})
export class T3Component implements OnInit {
  public isGoldMember: boolean = false;

  constructor() { }

  ngOnInit(): void {
  }

}

*ngIfは条件を複数指定できます。

例えば、ゴールド会員ボタンを表示させる場合に、ゴールド会員フラグとは別にポイントが100ポイント以上の条件も追加するとこんな感じです。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-t3',
  templateUrl: './t3.component.html',
  styleUrls: ['./t3.component.css']
})
export class T3Component implements OnInit {
  public isGoldMember: boolean = false;
  public point: number;

  constructor() { }

  ngOnInit(): void {
    this.isGoldMember = true;
    this.point = 100;
  }

}

<div class="member">
    <div>会員情報を表示</div>
    <div class="button-field">
        <button>一般会員</button>
        <button *ngIf="isGoldMember && point >= 100">ゴールド会員</button>
    </div>
</div>

this.point = 100以上の時は、ゴールド会員ボタンが表示されるし、this.point = 0とかにすると、ゴールド会員ボタンが非表示にできます。

エンジニアの基礎力を上げるおすすめ本を紹介！