는 template tag 안에서, 그 변수가 있을지 없을지 모르는 상태에서 사용
*는 변수가 존재할때,
The asterisk (*) prefix
Surely you noticed the asterisk (*) prefix to the directive name and wondered why it is necessary and what it does.
*ngIf displaying the hero's name if
The asterisk is "syntactic sugar" for something a bit more complicated. Internally, Angular desugars it in two stages. First, it translates the
*ngIf="..."into a template attribute,
template="ngIf ...", like this.
Then it translates the template attribute into a template element, wrapped around the host element, like this.
*ngIfdirective moved to the
<template>element where it became a property binding,
- The rest of the
<div>, including its class attribute, moved inside the
None of these forms are actually rendered. Only the finished product ends up in the DOM.
Angular consumed the
<template> content during its actual rendering and replaced the
<template> with a diagnostic comment.
Angular transforms the
*ngFor in similar fashion from asterisk (*) syntax through template attribute to template element.
Here's a full-featured application of
NgFor, written all three ways:
This is manifestly more complicated than
ngIf and rightly so. The
NgFor directive has more features, both required and optional, than the
NgIf shown in this guide. At minimum
NgFor needs a looping variable (
let hero) and a list (
You enable these features in the string assigned to
ngFor, which you write in Angular's microsyntax.
- angularjs 2.0
- front end
- Dependency Injection