String interpolation - {{...}}

<p>{{ obj.prop }}</p>

Property binding - [...]

...
<p [class.some-class]="booleanParam">...</p>
...

Event binding - (...)

...
<button (click)="func()">Button</button>
...

Two way binding / Banana-in-a-box - [(ngModel)]

...
<input type="text" name="user" [(ngModel)]="obj.prop">
<!-- Only to get input -->
<input type="text" name="user" (ngModel)="obj.prop">
<!-- Only to display value -->
<input type="text" name="user" [ngModel]="obj.prop">
...

Safe-Navigation operator - ?.

To handle null values

...
<p>{{ obj?.prop }}</p>
<div *ngIf="obj?.prop">...</div>
...

Structural bindings / directives

• *ngFor

Repeating data.

...
<p *ngFor="let obj of objs">{{ obj.prop }}</p>
...

• *ngIf

Show / Hide content - Adds / Removes element from the DOM.

...
<p *ngIf="booleanParam">...</p>
...

• [hidden]

Show / Hide content - Changes the visibility of the element in the DOM.

...
<p [hidden]="booleanParam">...</p>
...

• [ngSwitch], *ngSwitchCase, *ngSwitchDefault

Adds the matching element and removes the unmatching element from the DOM.

...
<div [ngSwitch]="obj.prop">
    <p *ngSwitchCase="param">...</p>
    <p *ngSwitchCase="'value'">...</p>
    <p *ngSwitchDefault>...</p>
</div>
...