Built-in Components

 

NgIF

<div *ngIf="false"></div> <!-- never displayed -->
<div *ngIf="a > b"></div> <!-- displayed if a is more than b -->
<div *ngIf="str == 'yes'"></div> <!-- displayed if str holds the string "yes" -->
<div *ngIf="myFunc()"></div> <!-- displayed if myFunc returns a true value -->

NgSwitch

<div class="container" [ngSwitch]="myVar">
    <div *ngSwitchCase="'A'">Var is A</div>
    <div *ngSwitchCase="'B'">Var is B</div>
    <div *ngSwitchDefault>Var is something else</div>
</div>

NgStyle

<div>
    <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
        red text
    </span>
</div>

NgClass

<div [ngClass]="classesObj">
    Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }}
</div>

NgFor

<h4 class="ui horizontal divider header">
    Simple list of strings
</h4>

<div class="ui list" *ngFor="let c of cities">
    <div class="item">{{ c }}</div>
</div>

Geting an index

<div class="ui list" *ngFor="let c of cities; let num = index">
    <div class="item">{{ num+1 }} - {{ c }}</div>
</div>

 

NgNonBindable

<div class='ngNonBindableDemo'>
    <span class="bordered">{{ content }}</span>
    <span class="pre" ngNonBindable>
         This is what {{ content }} rendered
    </span>
</div>