AngularのTemplate Syntax

Angular - Template Syntaxを読んだメモです。

（v4.3.6対応）

Binding一覧

<!-- Property -->https://angular.io/guide/template-syntax
<img [src]="heroImageUrl">
<hero-detail [hero]="currentHero"></hero-detail>
<greeting message="hello"></greeting><!-- プロパティが文字列かつテンプレートに直接埋め込む場合 -->

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

<!-- Class -->
<div class="bad curly special" [class]="badCurly">Bad curly</div><!-- `badCurly`で上書きされる -->
<div [class.special]="isSpecial">The class binding is special</div><!-- 特定のクラスのon/off -->

<!-- Style -->
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>

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

参考

• https://angular.io/guide/template-syntax#property-binding–property-
• https://angular.io/guide/template-syntax#attribute-class-and-style-bindings
• https://angular.io/guide/template-syntax#event-binding—event-

Operator一覧

<!-- Pipe -->
<div>Title through uppercase pipe: {{title | uppercase}}</div>

<!-- Safe navigation operator (`?.`) -->
The null hero's name is {{nullHero?.name}}

<!-- Non-null assertion operator (`!`)-->
<div *ngIf="hero">
  The hero's name is {{hero!.name}}
</div>

参考

• https://angular.io/guide/template-syntax#template-expression-operators
• http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator

Built-in attribute directives

ngClass

• 複数のクラスを管理する場合に有効
• <div [ngClass]="currentClasses"></div>
• https://angular.io/guide/template-syntax#ngClass

ngStyle

• 複数のインラインスタイルを管理する場合に有効
• <div [ngStyle]="currentStyles"></div>
• https://angular.io/guide/template-syntax#ngStyle

ngModel

• https://angular.io/guide/template-syntax#ngModel

Two-way

export class SizerComponent {
  @Input() size: number | string;
  @Output() sizeChange = new EventEmitter<number>();
    ...
    resize(delta: number) {
    this.sizeChange.emit(this.size);
  }
}

<!-- 以下コードは同じ結果になる -->
<my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>
<my-sizer [(size)]="fontSizePx"></my-sizer>

• https://angular.io/guide/template-syntax#two-way-binding—

*ngForのtrackByを使って描画対象かどうかを判断する

• https://angular.io/guide/template-syntax#ngfor-with-trackby

Template reference variables ( #var )

• https://angular.io/guide/template-syntax#template-reference-variables–var-

  • A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.

その他

DOM propertyとは

• https://angular.io/guide/template-syntax#html-attribute-vs-dom-property

  • Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model). * > Attributes initialize DOM properties and then they are done. Property values can change; attribute values can’t.

• HTML attribute と DOM property - Please Sleep

Template expressions/statementsで利用できないJS構文

• expressions
  • https://angular.io/guide/template-syntax#template-expressions
• statements
  • https://angular.io/guide/template-syntax#template-statements

    • The template statement parser differs from the template expression parser and specifically supports both basic assignment (=) and chaining expressions (with ; or ,).

Template expressionsのガイドライン

• https://angular.io/guide/template-syntax#expression-guidelines

  • No visible side effects

  • Quick execution

  • Simplicity

  • Idempotence (冪等性)