HTML

Interpolation

<div> {{title}} </div>
<div> {{title | uppercase }} </div>

| uppercase = a pipe

Two way binding

In app.module.ts and added to import list:

import { FormsModule } from '@angular/forms';

In html:

<label>name:
  <input [(ngModel)]="hero.name" placeholder="name">
</label>

Loops

<ul class="heroes">
  <li *ngFor="let hero of heroes">
          {{hero.id}}
  </li>
</ul>

Event Binding

OnSelect defined in ts for this component

<div (click)="onSelect(hero)">  
<button (click)="add(heroName.value); heroName.value=''">
  add
</button>

If

if selectedHero exists/defined

<div *ngIf="selectedHero">

Conditional Classes

[class.some-css-class]="some-condition"
<li [class.selected]="hero === selectedHero"> hi </li>

Property Binding(used with @Input )

<component [hero]="selectedHero"> </component>