masalibの日記

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

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

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


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

import { Component, OnInit } from '@angular/core';

@Component({
  selector: '.app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {
  allowNewServer  = false;

  constructor() {
    setTimeout(() =>{
      this.allowNewServer = true;
    },3000);
  }
  
  ngOnInit() {
  }
}

解説
f:id:masalib:20170505180306p:plain

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

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

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

<p [innertext]="allowNewServer"></p>


<app-server></app-server>
<app-server></app-server>
<app-server></app-server>

解説
f:id:masalib:20170505175710p:plain

結果
f:id:masalib:20170505175821p:plain

プロパティーバイディング
いろいろ触れるのね

Angular 2 The Complete Guide

Angular 2 The Complete Guide

Angular 2: From Theory To Practice (English Edition)

Angular 2: From Theory To Practice (English Edition)