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:45] – mate
+++ development:angular:directivas-estructurales [09/02/2020 14:51] (actual) – [ngSwitch] mate
@@ Línia 45: / Línia 45: @@
 == ngSwitch
-  * PPT 4.6
+<code bash>ng g[enerate] c[component] components/ngSwitch -is --skipTests</code>
+<sxh typescript; title: ng-switch.component.ts>
+...
+export class NgSwitchComponent implements OnInit {
+    mensaje = 'info';
+}
+...
+</sxh>
+<sxh html; title: ng-switch.component.html>
+<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>