Angular:インプットイベント

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

Angular:クリックイベント

Angular(バージョン２以降)の勉強、その１１です
クリックイベントを起こすのを記載します
普通のjavascriptだと「onclick=xxxx」と記載しますが
Angularだと「(click)="xxxxx"」と記載します

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

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

追加したのが「onCreateServerの部分になります」

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

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

<p>{{serverCreationStatus}}</p>
<p>{{ allowNewServer}}</p>

ここではonclickではなく(click)になっている所が重要です

結果

普通に切り替わりました
次はインプットイベントについて記載します
masalib.hatenablog.com

Angular 2: From Theory To Practice (English Edition)

Beginning Angular 2 with Typescript (English Edition)

Angular:プロパティーバイディング

Angular(バージョン２以降)の勉強、その１０です
当たり前だけどhtmlのプロパティーも触れます
その部分について記載します

Angular:データバイディング

Angular(バージョン２以降)の勉強、その９です
tyepscriptの変数をhtmlのテンプレートというかHMTLに反映させる
講義ではデータバイディングみたいに記載してあった

Angular:独自タグじゃなくてdivタグをセレクターとして使う

Angular(バージョン２以降)の勉強、その８です
前回に続き使用用途よくわからないが
もしかして使う可能性があるのでメモとして残します
独自タグじゃなくてdivタグをセレクターとして使う

Angular:テンプレートとcssファイルを使わないやり方

備忘録メモのその７です
CLIで自動的に作ってくれるテンプレートとcssファイルがあるのですが
それを使わない方法を記載します

個人的には良くないと思うけど
ファイルを読み込ませるのに時間かかるから？？
それを省略するためにやっているのかな？？

Angular:componentを作ってみる(CLI)

Angular(バージョン２以降)の勉強、その６です
CLIで自動的に作ってくれる機能があるみたいなので
そちらをやってみたいと思います