1. NgClass vs class binding
Es la mejor opción para agregar o quitar clases CSS dinámicamente.Veamos el primer ejemplo donde utilizamos class binding en vez de NgClass, para modificar una sola clase.
!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>setClasses() {
let classes = {
saveable: this.canSave, // true
modified: !this.isUnchanged, // false
special: this.isSpecial, // true
};
return classes;
}<div [ngClass]="setClasses()">This div is saveable and special</div>2. NgStyle vs style binding
Al igual que antes, vemaos un ejemplo de style binding, donde solo podemos assignar un estilo a la vez<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
This div is x-large.
</div>setStyles() {
let styles = {
// CSS property names
'font-style': this.canSave ? 'italic' : 'normal', // italic
'font-weight': !this.isUnchanged ? 'bold' : 'normal', // normal
'font-size': this.isSpecial ? '24px' : '8px', // 24px
};
return styles;
}<div [ngStyle]="setStyles()">
This div is italic, normal weight, and extra large (24px).
</div>3. NgIf vs visibilidad con clases y estilos
Hasta ahora, las directivas NgClass, NgStyle, se trascribían [ngClass ] y [ngStile] en el template , pero la directiva NgIf se escribe *ngIf en el template, y no nos olvidemos del asterisco.Si queremos quitar elementos (y sus hijos)del DOM, utilizaremos NgIf, pero si no los queremos quitar pero si ocultar (hacerlos invisibles) podemos aplicar una clase o estilo invisible.
<div *ngIf="currentHero">Hello, {{currentHero.firstName}}</div><!-- because of the ngIf guard
`nullHero.firstName` never has a chance to fail -->
<div *ngIf="nullHero">Hello, {{nullHero.firstName}}</div>
<!-- Hero Detail is not in the DOM because isActive is false-->
<hero-detail *ngIf="isActive"></hero-detail><!-- isSpecial is false -->
<div [class.hidden]="!isSpecial">Show with class</div>
4. NgSwitch (cuidado con los *)
Es similar a la anterior, pero cuidado con los asteriscos y corchetes, ya que se utilizan 3 subdirectivas1. [ngSwitch]
2. *ngSwitchCase
3. *ngSwitchDefault
Veamos un ejemplo en el template:
<span [ngSwitch]="toeChoice">
<span *ngSwitchCase="'Eenie'">Eenie</span>
<span *ngSwitchCase="'Meanie'">Meanie</span>
<span *ngSwitchCase="'Miney'">Miney</span>
<span *ngSwitchCase="'Moe'">Moe</span>
<span *ngSwitchDefault>other</span>
</span>5.NgFor e índices. Problemas de rendimiento.
Sirve para hacer repeticones. Se puede aplicar a un simple div o a un componente:div *ngFor="let hero of heroes">{{hero.fullName}}</div><hero-detail *ngFor="let hero of heroes" [hero]="hero"></hero-detail>Tenemos las siguientes variables dentro del bucle NgFor:
1. index: Contador desde 0 en el bucle
2. first: si es el primero
3. last: si es el último
4. even: si es par
5. odd: si es impar
Aquí mostramos el nombre del héroe y sumamos 1 para que nos muestre el contador desde 1 y no desde 0:
<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.fullName}}</div>Si pedimos otra vez la lista de heroes desde el servidor, borra la lista antigua y la sustituye por la nueva. En cambio, si le aportamos una función que le indica que un héroe es el mismo si tiene el mismo id, entonces, angular no borrara los cambios efectuados desde el último refresco.
Veamos la función
trackByHeroes(index: number, hero: Hero) { return hero.id; }<div *ngFor="let hero of heroes; trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>
