Templates

• script tags are not allowed, top level html/body are pointless of course
• expressions only: {{userName}}, {{1 + 1}}
  • supports null coalescing operator {{post?.category}}
  • no chaining, new, assignment, side effects or bitwise ops
• bound properties must be public in the class (see here)
• referencing: <input #username> {{username.value}}
  referencing in the class:

  @ViewChild('username')
  private readonly usernameInputRef: ElementRef<HTMLInputElement>;
  

• data flow and binding:
  • box, banana, banana in a box
  • [attr/prop], (event), [(two-way)]
• class, style, attr:
  • [class], [class.foo],
    [class]="isOpen ? 'far fa-minus-square' : 'far fa-plus-square'",
    [class]="['pill', 'pill-' + name]",
    [class]="{'hidden': !isVisible, 'expanded': isExpanded}"
  • [style], [style.width.%], [style.width.px],
    [style]="getStyle()" where the function returns a style: Partial<CSSStyleDeclaration> = {} object
  • [attr.colspan]="colCount", [attr.disabled]="!canSubmit"
  • [ngClass], [ngStyle] = classic directive, 👴 probably will be deprecated
• structural directives: *ngIf, *ngFor, *ngSwitch