14 Useful Angular Template syntax

List for: Angular template syntax, Angular-Template Syntax, syntax example, 14 useful angular template syntax, AngularJS display value in template.

Different angular template syntax for render application data in template.

Here is 14 useful angular template syntax that will help you for creating best angular app.

14 Useful Angular Template syntax

Template syntax

<input [value]="firstName">

Binds property value to the result of expression firstName.

<div [attr.role]="myAriaRole">

Binds attribute role to the result of expression myAriaRole.

<div [class.extra-sparkle]="isDelightful">

Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.

<div [style.width.px]="mySize">

Binds style property width to the result of expression mySize in pixels. Units are optional.

<button (click)="readRainbow($event)">

Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object.

<div title="Hello {{ponyName}}">

Binds a property to an interpolated string, for example, “Hello Seabiscuit”. Equivalent to:
<div [title]="'Hello ' + ponyName">

<p>Hello {{ponyName}}</p>

Binds text content to an interpolated string, for example, “Hello Seabiscuit”.

<my-cmp [(title)]="name">

Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">

<video #movieplayer ...>
<button (click)="movieplayer.play()">
</video>

Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.

<p *myUnless="myExpression">...</p>

The * symbol turns the current element into an embedded template. Equivalent to:
<ng-template [myUnless]="myExpression"><p>...</p></ng-template>

<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>

Transforms the current value of expression cardNumber via the pipe called myCardNumberFormatter.

<p>Employer: {{employer?.companyName}}</p>

The safe navigation operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.

<svg:rect x="0" y="0" width="100" height="100"/>

An SVG snippet template needs an svg: prefix on its root element to disambiguate the SVG element from an HTML component.

<svg>
<rect x="0" y="0" width="100" height="100"/>
</svg>

An <svg> root element is detected as an SVG element automatically, without the prefix.