Angular [(Two Way Binding)](雙向繫結)(08)

html部分

<input [(ngModel)]="keyword" placeholder="[(雙向繫結)]" (keyup.escape)="onKeyClear()"/>
  文字:{{keyword}}，字數:{{keyword.length}}

ts部分

  keyword = '';
  onKeyClear() {
    this.keyword = "";
  }

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular (Event Binding)(事件繫結)(07)

$event可傳可不傳
html部分

<a on-click="CountPlus($event)">點擊次數{{count}}</a><br />
<a (click)="CountPlus($event)">點擊次數{{count}}</a>

ts部分

export class EventBindingComponent implements OnInit {
  count = 0;
  CountPlus($event:any) {
    this.count++;
    console.log($event);
  }
  constructor() { }
  ngOnInit(): void {
  }
}

===============================================================
保哥作業1
請利用 Angular 資料繫結方法 (內嵌繫結、屬性繫結、事件繫結) 完成任務。
1.當使用者在網頁右側的關鍵字搜尋輸入文字時，會自動在輸入框的正下方顯示正在輸入的字元數。
2.當使用者在輸入框按下 Escape 按鍵時，會自動清空輸入框的內容。
2022-09-22修正，比較懶的做法寫在同一個判斷中。
html部分

  <input type="text"
         (keyup)="onKeyClear($event)" />
  字數:{{keywordCount}}

ts部分

  keyword = "";
  keywordCount = 0;
  onKeyClear(event: KeyboardEvent) {
    let elm = (<HTMLInputElement>event.target);
    if (event.key == "Escape") {
      elm.value = "";//這段要清除掉Html上的文字
      this.keyword = "";
    } else {
      this.keyword = elm.value;
    }
    console.log(this.keyword);
    this.keywordCount = this.keyword.length;
  }

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular [Property Binding](屬性繫結)(06)

html部分

<a [href]="url" [attr.data-tite]="title">{{title}}</a>

ts部分

export class PropertyBindingComponent implements OnInit {
  title = "{{屬性繫結}}";
  url = "http://tw.yahoo.com";  
  constructor() { }
  ngOnInit(): void {
  }
}

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網