Angular 2 why asterisk (*)

93
votes

In angular 2 document, * and template, we know that the *ngIf, *ngSwitch, *ngFor can be expanded to ng-template tag. My question is:

I think the ngIf or ngFor without * can also be translated and expanded to template tag by angular engine.

The following code

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

would be the same as

<ng-template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</ng-template>

So why bother designing a strange symbol asterisk(*) in angular 2?

5
javascriptangularangular-directive
From the link, We didn't see the <template> tags because the * prefix syntax allowed us to skip those tags and focus directly on the HTML element that we are including, excluding, or repeating. – Tushar
angular.io/docs/ts/latest/guide/… – TGH
It is your choice to use the template tag directly, other wise you can use the * which takes care of the template tag for you. - Source – Tushar

5 Answers

95
votes

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>
36
votes

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 supported.

<ng-container *ngIf="boolValue">
  <div *ngFor="let x of y"></div>
</ng-container>
24
votes

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

3
votes

From Angular docs:

Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

As with other directives, you apply a structural directive to a host element. The directive then does whatever it's supposed to do with that host element and its descendants.

Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name as in this example.

<p *ngIf="userInput">{{username}}</p>
2
votes

Sometimes you may need <a *ngIf="cond"> for example, when it's only one tag. sometimes you may want to put the ngIf around multiple tags without having a real tag as a wrapper which leads you to <template [ngIf]="cond"> tag. how can angular know wether it should render the the ngIf directive owner in the final result html or not? so it's something more than just making the code more clear. it's a necessary difference.