Angular 2: Difference between revisions

Jump to navigation Jump to search
766 bytes added ,  11 April 2016
Line 48: Line 48:
</syntaxhighlight>
</syntaxhighlight>


-----------
----


<syntaxhighlight lang="typescript">
<syntaxhighlight lang="typescript">
Line 61: Line 61:
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<div [ngClass]="classesObj">Using object var. Border {{classesObj.bordered ? "ON":"OFF"}}</div>
<div [ngClass]="classesObj">Using object var. Border {{classesObj.bordered ? "ON":"OFF"}}</div>
</syntaxhighlight>
<syntaxhighlight lang="html">
<div class="base" [ngClass]="['blue','round']">This will always have a blue and round classes</div>
</syntaxhighlight>
<syntaxhighlight lang="typescript">
this.classList = ['blue','round'];
</syntaxhighlight>
<syntaxhighlight lang="html">
<div class="base" [ngClass]="classList"
</syntaxhighlight>
=== <nowiki>ngFor</nowiki> ===
<syntaxhighlight lang="typescript">
this.cities = ['Miami','Sao Paulo','New York'];
</syntaxhighlight>
<syntaxhighlight lang="html">
<div class="ui list" *ngFor="#c of cities">
  <div class="item">{{c}}</div>
</div>
</syntaxhighlight>
adding index
<syntaxhighlight lang="html">
<div class="ui list" *ngFor="#c of cities; #num = index">
  <div class="item">{{num+1}} - {{c}}</div>
</div>
</syntaxhighlight>
</syntaxhighlight>


Navigation menu