masalibの日記

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

Angular:インプットイベント

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

  • template側(/app/servers/servers.component.html)
  • TypeScript側(/app/servers/servers.component.ts)親子関係の親の部分です
  • 結果
続きを読む

Angular:クリックイベント

Angular(バージョン2以降)の勉強、その11です
クリックイベントを起こすのを記載します
普通の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)になっている所が重要です

結果
f:id:masalib:20170506022418j:plain


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


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

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

続きを読む

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

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

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

続きを読む