Angular 2 why asterisk (*)
Asterisk syntax is a syntatic sugar for more wordy template syntax which directive expands to under the hood, you are free to use any of these options.
Quote from the docs:
The asterisk is "syntactic sugar". It simplifies ngIf and ngFor for both the writer and the reader. Under the hood, Angular replaces the asterisk version with a more verbose form.
The next two ngIf examples are effectively the same and we may write in either style:
<!-- Examples (A) and (B) are the same --> <!-- (A) *ngIf paragraph --> <p *ngIf="condition"> Our heroes are true! </p> <!-- (B) [ngIf] with template --> <template [ngIf]="condition"> <p> Our heroes are true! </p> </template>
Angular2 offers a special kind of directives - Structural directives
Structural directives are base on the <template>
tag.
The *
before the attribute selector indicates that a structural directive should be applied instead of a normal attribute directive or property binding. Angular2 internally expands the syntax to an explicit <template>
tag.
Since final there is also the <ng-container>
element that can be used similarly to the <template>
tag but supports the more common short-hand syntax. This is for example required when two structural directives should be applied to a single element, which is not supportd.
<ng-container *ngIf="boolValue">
<div *ngFor="let x of y"></div>
</ng-container>
Angular treats template elements in a special way. The *
syntax is a shortcut that lets you avoid writing the whole <template>
element. Let me show you how it works.
using this
*ngFor="let t of todos; let i=index"
translates it into
template="ngFor: let t of todos; let i=index"
which is then converted into
<template ngFor [ngForOf]="todos" .... ></template>
also Agular's Structural directives like ngFor
, ngIf
etc. Prefixed by *
just to differentiate them from other custom directives and components
see more here