資料雙向繫結和管道

NgModules用於配置注入器和編譯器，並幫你把那些相關的東西組織在一起。NgModule 是一個帶有@NgModules裝飾器的類。用來實現資料雙向繫結

<div>
    <label for="">使用者名稱</label>
    <input type="text" [(ngModel)]="username">

    <label for="">密碼</label>
    <input type="text" [(ngModel)]="password">
    <
 
button (click)=clickfn()>登入</button>
</div>
<h1 >{{username}}</h1>

管道

管道可以說是angular裡面比較好用的資料轉換和格式化工具。

Angular 為典型的資料轉換提供了內建的管道，包括國際化的轉換（i18n），它使用本地化資訊來格式化資料。資料格式化常用的內建管道如下：

• DatePipe：根據本地環境中的規則格式化日期值。

• UpperCasePipe：把文字全部轉換成大寫。

• LowerCasePipe：把文字全部轉換成小寫。

• CurrencyPipe：把數字轉換成貨幣字串，根據本地環境中的規則進行格式化。

• DecimalPipe：把數字轉換成帶小數點的字串，根據本地環境中的規則進行格式化。

• PercentPipe：把數字轉換成百分比字串，根據本地環境中的規則進行格式化。

<p>The hero's birthday is {{ birthday | date }}</p>

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

@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based
}
 

自定義管道

<h1>{{msg| lcupcase:'元'}}</h1>

建立filter:

ng g pipe 名字/目錄

實現如下介面：

export class LcupcasePipe implements PipeTransform {

  transform(value:string, ...args:string[]):string{
   console.log(value);
    return '$'+value+args[0];
  }

}