一時的なAlertメッセージを表示する｜AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

今回は、登録や編集画面の完了メッセージやアラートメッセージを
一時的に表示したいときのサンプルプログラムを作成してみます。

開発環境

・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode

Angularサンプルプログラム

テンプレートHTML

まずはテンプレート側の該当箇所を作成してみます。

<div *ngIf="alertmsgflag">
    <alert type="danger" [dismissible]="true" (onClose)="onAlertClose()">
        {{alertmsg}}
    </alert>
</div>

ngIfでコンポーネント側で定義した変数「alertmsgflag」がtrueのときのみ表示するようにし、
クリックすると非表示になるようにします。

Sampleコンポーネント

次にコンポーネントを作成します。

export class Sample {
	public alertmsgflag: boolean = false;
	public alertmsg: string = 'ERROR!!';
	public onAlertClose(): void {
	  this.alertmsgflag = false;
	}
	public onAlertOpen(): void{
	  this.alertmsgflag = true;
	}
}

テンプレート側で参照していたalertmsgflag変数を定義し、
そのtrue/falseを切り替えるメソッドを作成します。

まとめ

エラーごとにalertmsgを変更することで適宜メッセージを切り替えられます。
今回はonAlertOpenメソッドを実行するタイミングを明記していませんが、
APIリクエストがうまく帰ってこなかったときなどに呼び出すとよいと思います。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ解発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座！Bootstrap活用を学ぶなら・・
魁！小野の塾 連載