การเชื่อมโยงข้อมูล Data Binding รูปแบบต่างๆ ใน Angular

<div class="special">Mental Model</div>
<img src="images/staff.png">
<button disabled>Save</button>

<!-- Normal HTML -->
<div class="special">Mental Model</div>
<!--  A new element! -->
<staff-detail></staff-detail>

<!-- เชื่อมโยงสถานะ disabled ของปุ่ม เป็นค่า`isUnchanged` ใน component property -->
<button [disabled]="isUnchanged">Save</button>

<input type="text" value="Jubjang">

// เราสามารถเรียกดูค่า "value" property ของ DOM ได้จากคำสั่ง ผ่าน console ในบราวเซอร์
document.getElementsByTagName('input')[0].value
// จะได้ค่า "Jubjang"

// จากนั้นเราลองเปลี่ยนค่าใน input box เป็น "Manop" แล้วใช้คำสั่งเดิม ดูค่า "value" property ของ DOM 
// และใช้คำสั่ง getAttribute('value') เรียกดูค่า "value" attribute
document.getElementsByTagName('input')[0].value
// จะได้ค่า "Manop"
document.getElementsByTagName('input')[0].getAttribute('value')


// จะได้ค่า "Jubjang"

<button>Enable</button>.

document.getElementsByTagName('button')[0].disabled
// ได้ค่าเป็น false

<button disabled>Enable</button>

document.getElementsByTagName('button')[0].disabled
// ได้ค่าเป็น true

<button disabled="false">Still Disabled</button>

document.getElementsByTagName('button')[0].disabled
// ได้ค่าเป็น true

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

@Component({
  selector: 'my-app',
  template: `
  <img [src]="staffImageUrl">
  <button [disabled]="isUnchanged">Cancel is disabled</button>
  <div [ngClass]="classes">[ngClass] binding to the classes property</div>
  `,
})
export class AppComponent  { 
  staffImageUrl:string;
  classes:string;
  isUnchanged:boolean;

  constructor(){
    this.staffImageUrl = 'staff.png';
    this.classes = 'mycssclass';
    this.isUnchanged = true;
  }

}

<img [src]="staffImageUrl">

<button [disabled]="isUnchanged">Cancel is disabled</button>

<div [ngClass]="classes">[ngClass] binding to the classes property</div>

<staff-detail [staff]="currentStaff"></staff-detail>

<img [src]="staffImageUrl">

<img bind-src="staffImageUrl">

<div [ngClass]="classes">[ngClass] binding to the classes property</div>

<staff-detail [staff]="currentStaff"></staff-detail>

<!-- ERROR: StffDetailComponent.staff ต้องการค่า
     Staff object, not the string "currentStaff" -->
<staff-detail staff="currentStaff"></staff-detail>

<staff-detail prefix="My string" [staff]="currentStaff"></staff-detail>

<p><img src="{{staffImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="staffImageUrl"> is the <i>property bound</i> image.</p>

<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';

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

@Component({
  selector: 'my-app',
  template: `
<p><span>"{{evilTitle}}" is the <i>interpolated</i> 
evil title.</span></p>
<p>"<span [innerHTML]="evilTitle"></span>" 
is the <i>property bound</i> evil title.</p>  
  `,
})
export class AppComponent  { 

  evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';

}

<tr>
<td colspan="{{1 + 1}}">One-Two</td>
<td>Three</td>
<td>Four</td>
</tr> 

[attr.colspan]="expression"

<tr>
<td [attr.colspan]="1 + 1">One-Two</td>
<td>Three</td>
<td>Four</td>
</tr> 

<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>

[class]="expression"

<button class="btn btn-primary" > Save </button>

<button class="btn btn-primary" [class]="myclass"> Save </button>

<button class="btn btn-danger"> Save </button>

[class.class-name]="expression"

<button class="btn" [class.btn-danger]="isDanger"> Save </button>

[class.btn-danger]="isDanger"

<button class="btn btn-danger"> Save </button>

[style.style-property]="expression"

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>

<button style="color: red;">Red</button>

<!-- การกำหนด style-property รูปแบบ dash-case -->
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
<!-- การกำหนด style-property รูปแบบ camelCase -->
<button [style.backgroundColor]="canSave ? 'cyan': 'grey'" >Save</button>

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

(event)="template statement"

<button (click)="onSave()">Save</button>

<button (click)="onSave()">Save</button>

<button on-click="onSave()">Save</button>

<!-- `myClick`คือ event ที่กำหนดขึ้นมาเองใน directive ที่ชื่อ `ClickDirective` -->
<div (myClick)="clickMessage=$event" clickable>click with myClick</div>

<input [value]="currentStaff.name"
       (input)="currentStaff.name=$event.target.value" >

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

@Component({
  selector: 'my-app',
  template: `
  <input [value]="myvalue" (input)="myvalue=$event.target.value" />
  <br>
  {{myvalue}}
  `,
})
export class AppComponent  { 

  myvalue = 10;

}

[value]="myvalue"

(input)="myvalue=$event.target.value"