Tutorial: https://angular.io/start

StackBlitz: https://stackblitz.com/edit/pjpscriv-angular-app

GitHub: https://github.com/pjpscriv/first-angular-app

1. First Steps

Directives

Directives are HTML attributes that Angular uses to extend the behaviour of vanilla HTML.

*ngFor

<div *ngFor="let item of list">...</div>

Where list must be an attribute of the template's corresponding component.

• *ngFor (& all directives with a *****) are structural directives - they shape and reshape the DOM.
• this is in comparison to attribute directives

*ngIf

<p *ngIf="item.description">
	{{item.description}}
</p>

Template Syntax

To put the value of a property into the DOM as text use the interpolation syntax.

<h3> {{ item.name }} </h3>

If you want to place that value in as a property use the property binding syntax.

<a [title]="item.name + 'details'">...</a>

Interpolation renders as text. Property binding lets you use in a template expression.