読者です 読者をやめる 読者になる 読者になる

masalibの日記

システム開発、運用と猫の写真ブログです

Angular:ngIf

Angular(バージョン2以降)の勉強、その13です
Angularっぽい記載がでてきました
DOMを操作するngIf(関数?ディレクティブ?)です
これもformでよく使うと思うので覚えたいと思います

公式のreference
NgIf - ts - API


TypeScript側(/app/servers/servers.component.ts)親子関係の親の部分です

export class ServersComponent implements OnInit {
  allowNewServer  = false;
  serverCreationStatus = "No Server was created";
  serverName = "TestServer";
  serverCreaed = false;
  constructor() {
    setTimeout(() =>{
      this.allowNewServer = true;
    },3000);
  }
  ngOnInit() { }

  onCreateServer(){
    this.serverCreaed = true;
    this.serverCreationStatus ='Server was created! Name is ' + this.serverName;
  }
  onUpdateServerName(event: any){
    console.log(event)
    this.serverName = (<HTMLInputElement>event.target).value;
  }
}

ボタンを押したらtrueになるようにしています
f:id:masalib:20170506213203p:plain

template側(/app/servers/servers.component.html)

<input type="text"
    class="form-control"
    [(ngModel)]="serverName"
    >
<button class="btn btn-primary"
[disabled] = "!allowNewServer"
(click)="onCreateServer()"
>追加するよ</button>
<!--  <p>{{serverName}}</p>-->
<p *ngIf="serverCreaed; else noserver" >{{serverName}}</p>

<ng-template #noServer>
  <p> no server was created </p>
</ng-template>
<p>{{serverCreationStatus}}</p>

ngifとその結果がfalseになった場合の
ng-templateを追加しました

f:id:masalib:20170506213318p:plain

結果

ボタンを押す前
f:id:masalib:20170506214345p:plain

ボタンを押す後
f:id:masalib:20170506214401p:plain

DOMが変わっていることが確認できます
formの入力チェック系で使えますね