Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- development:angular:directivas-estructurales [27/01/2020 07:29] – creat mate
+++ development:angular:directivas-estructurales [09/02/2020 14:51] (actual) – [ngSwitch] mate
@@ Línia 42: / Línia 42: @@
 </sxh>
-== ngStyle
+== procesos asíncronos (4.4)
-  * cambio de estilo de elementos HTML usando atributos de los componentes
-  * scope de actuación del CSS -> propio del componente, no efecta a otros
-  * añadir/quitar clases CSS según nuestro internés
-  * directivas personalizadas
-  * <code bash>ng c[reate] c[omponent] components/<component> -it -is --spec=false</code>
-    * directorio **components** podría variar a nuestra conveniencia
-    * ''-it'': ?
-    * ''-is'': ?
-    * ''--spec=false'': no crear ficheros de pruebas unitarias
-<sxh typescript; title: prueba ngStyle>
+== ngSwitch
+<code bash>ng g[enerate] c[component] components/ngSwitch -is --skipTests</code>
+<sxh typescript; title: ng-switch.component.ts>
 ...
-template: `<p [ngStyle]="{'font-size': tam + 'px'}">Probando ngStyle...</p>`,
+export class NgSwitchComponent implements OnInit {
+    mensaje = 'info';
+}
 ...
-export class NgStyleComponent implements OnInit {
-    tam: number =15;
-}</sxh>
-<sxh typescript; title: otra forma de ngStyle>
-template: `<p [style.fontSize]="'28px'">Probando ngStyle...</p>`
 </sxh>
-<sxh typescript; title: otra forma más de ngStyle>
+<sxh html; title: ng-switch.component.html>
-template: `<p [style.fontSize.px]="tam">Probando ngStyle...</p>`
+<div [ngSwitch]="mensaje">
+    <div *ngSwitchCase="'success'">Success</div>
+    <div *ngSwitchCase="'info'">Info</div>
+    <div *ngSwitchCase="'warning'">Warning</div>
+    <div *ngSwitchDefault>Danger</div>
+</div>
+</sxh>
+<sxh html; title: ng-switch.component.html v2>
+<button type="button" (click)="mensaje='success'" class="btn btn-primary">Cambiar</button>
+<div [ngSwitch]="mensaje">
+    <div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
+        <strong>Well done!</strong> You successfully read this important alert message!
+    </div>
+    <div *ngSwitchCase="'info'" class="alert alert-info" role="alert">
+        <strong>Heads up!</strong> This alert needs your attention...
+    </div>
+    <div *ngSwitchCase="'warning'" class="alert alert-warning" role="alert">
+        <strong>Warning!</strong> Better check yourself, you're not looking too...
+    </div>
+    <div *ngSwitchDefault class="alert alert-danger" role="alert">
+        <strong>Oh snap!</strong> change a few things up and try submitting again!
+    </div>
+</div>
 </sxh>
-== ámbito CSS
-  * para evitar colisiones de estilos, angular se encarga de añadir atributos para que cada componente tenga sus propios estilos
-  * si queremos estilos a nivel global, deberemos tocar **style.css**
-== ngClass
-  * más usada y más flexibilidad que **ngStyle**
-  * sintaxis:
-    * <sxh typescript; title: ngClass><div [ngClass] ="'first second'">...</div></sxh>
-    * <sxh typescript; title: ngClass><div [ngClass] ="['first', 'second']">...</div></sxh>
-    * <sxh typescript; title: ngClass><div [ngClass] ="{'first': true, 'second': true}">...</div></sxh>
-    * <sxh typescript; title: ngClass><div [ngClass] ="stringExp | arrayExp | objExp">...</div></sxh>
-    * <sxh typescript; title: ngClass><div [ngClass] ="{'class1 class2 class3':true}">...</div></sxh>
-== procesos asíncronos (4.4)
-== ngSwitch
-== 4.5 Directivas personalizadas
-  * <code bash>ng g[enerate] d[irective] directivas/destacado --spec=false</code>