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

ntuti

一時的な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;
    }
}