Angular 2 Template - Tuong-Nguyen/Angular-D3-Cometd GitHub Wiki

View (Template) - Model (Component) Binding

Property binding

<ns-pony name="{{ pony.fullName() }}"></ns-pony>

<ns-pony [name]="pony.fullName()"></ns-pony>
  • Option 2 is preferred.
  • Changes are detected by the framework -> Update View
  • Bind Model to View.

Event Binding

<div (click)="onButtonClick($event)">
   <button>Click me!</button>
</div>
  • Call method/statements when event happens.
  • Event is bubbled up: Click div or click button.
  • Send event object by: $event
  • Event is continued bubbled up after the method is called. Cancel with event.stopPropagation();
  • Prevent default behavior by: event.preventDefault();
  • Differences between the 2 lines below:
<component [property]="doSomething()"></component>

<component (event)="doSomething()"></component>
  • First line: doSomething is reevaluated for every change detection cycle.
  • Second line: doSomething is called when event happens.

2-way binding: Property and Event

Pattern: size value and sizeChange event pattern.
- Declare size property and sizeChange event in the component - Parent can use 2-way binding with this component.

<my-sizer [(size)]="fontSizePx"></my-sizer>

<my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>

Bind size property and sizeChange event of component to parent's fontSizePx property.

Note: Form elements (input and select) do not support this pattern. Fortunately, NgModel directive can be used.

Directives for building template:

Add many element with *ngFor

Structure directive: add - remove dom elements.

<event-thumbnail *ngFor="let event of events" [event]="event"></event-thumbnail>

Remove element with *ngIf

Remove location div if event?.location is undefined. Remove Online div if event?onlineUrl is undefined.

    <div *ngIf="event?.Location">
      <span>Location: {{event?.location?.address}}</span>
      <span class="pad-left">{{event?.location?.city}}, {{event?.location?.country}}</span>
    </div>
    <div *ngIf="event?.onlineUrl">
      Online URL: {{event?.onlineUrl}}
    </div>

Hide element [hidden]

Hide/Show the div depending on event.hidden property

    <div [hidden]="event.hidden">
      <div>Date: {{event.date}}</div>
      <div>Time: {{event.time}}</div>
      <div>
        <span>Location: {{event?.location?.address}}</span>
        <span class="pad-left">{{event?.location?.city}}, {{event?.location?.country}}</span>
      </div>
    </div>

ngSwitch

<div *ngFor="let event of events" class="well hoverwell thumbnail" [ngSwitch]="event.format">
    <h2>{{event.name}}</h2>
    <span class="label label-warning" *ngSwitchCase="In-Person">In-Person</span>
    <span class="label label-warning" *ngSwitchCase="Online">Online</span>
    <span class="label label-warning" *ngSwitchDefault>TBD</span>
</div>

Class binding - ngClass

  • Add in-persion css class if event.format = 'InPerson'
  • Add online css class if event.format = 'Online'
  • Add tbd css class if event.format is not defined
<h2 [ngClass]="{'in-person': event.format === 'InPerson', online: event.format === 'Online', tbd: event.format == undefined }">{{event.name}}</h2>
<h2 [class.in-person]="event.format === 'InPerson'" [class.online]="event.format === 'Online'" [class.tbd]="event.format == undefined">{{event.name}}</h2>

Style binding - ngStyle

  • Add color green if event.format = 'InPerson'
  • Add color red class if event.format = 'Online'
  • Add color #aaa class if event.format is not defined
<h2 [ngStyle]="{'color': event.format==='Online'?'red':event.format==='InPerson'?'green':'#aaa'}">{{event.name}}</h2>

<h2 [style.color]="event.format==='Online' ? 'red' : event.format==='InPerson' ? 'green' : '#aaa'">{{event.name}}</h2>
⚠️ **GitHub.com Fallback** ⚠️