Angular:インプットイベント

Angular(バージョン２以降)の勉強、その１２です
前回でクリックイベントができたので
今回はインプットイベントになります
formの部分で使うので大事です

template側（/app/servers/servers.component.html）
TypeScript側（/app/servers/servers.component.ts）親子関係の親の部分です
結果

template側（/app/servers/servers.component.html）

<label>Server Nmae </label>
<input type="text" class="form-control" (input)="onUpdateServerName($event)">
  <p>{{serverName}}</p>

<button class="btn btn-primary" [disabled]="!allowNewServer" (click)="onCreateServer()">追加するよ</button>
<p>{{serverCreationStatus}}</p>
<p>{{ allowNewServer}}</p>
<p [innertext]="allowNewServer"></p>

追加したのは

<input type="text" class="form-control" 　(input)="onUpdateServerName($event)">
<p>{{serverName}}</p>

inputタグとそれにインプットのバイディング(input)の部分になります
serverNameはインプットした内容を反映する部分になります
f:id:masalib:20170506200332p:plain

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

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

  onCreateServer(){
    this.serverCreationStatus ='Server was created'
  }
  onUpdateServerName(event: any){
    console.log(event)
    this.serverName = (<htmlinputelement>event.target).value;
  }
}

追加したのが「onUpdateServerNameの部分になります」
コンソールログは普通のjavascriptのログになります

f:id:masalib:20170506201143p:plain