Angular's template syntax extends HTML and JavaScript.
Structural directives shape or reshape the DOM's structure, typically by adding, removing, and manipulating the elements to which they are attached. Any directive with an * is a structural directive.
*ngFor A structural directive that renders a template for each item in a collection.
<div *ngFor="let product of products">
</div>
*ngIf Renders the element only if the value exists.
'[ngSwitch]' Switch statement
<div [ngSwitch]="hero?.emotion">
<app-happy-hero *ngSwitchCase="'happy'" [hero]="hero"></app-happy-hero>
<app-sad-hero *ngSwitchCase="'sad'" [hero]="hero"></app-sad-hero>
<app-confused-hero *ngSwitchCase="'confused'" [hero]="hero"></app-confused-hero>
<app-unknown-hero *ngSwitchDefault [hero]="hero"></app-unknown-hero>
</div>
{{...}} Interpolation refers to embedding expressions into marked up text.
<h3>
{{ product.name }}
</h3>
[ ] Property binding - binds a property to a HTML property
<a [title]="product.name + ' details'">
{{ product.name }}
</a>
( ) Event binding is used to bind an event to a HTML event
<button (click)="share()">
Share
</button>
Alternative event binding:
<button on-click="share()">
Share
</button>
https://stackblitz.com/@ashburnere