Wednesday, April 4, 2018

Angular Switch Statement

The ngSwitch directive is an inbuilt directive that lets you hide/show HTML elements depending on an expression.
NgSwitch uses ngSwitchCase keyword to define a set of possible element which will be selected based on the ngSwitchCase

<element ngSwitch="expression">
  <element *ngSwitchCase="value"></element>
  <element *ngSwitchCase="value"></element>
  <element *ngSwitchCase="value"></element>
</element>

For Example say we want to design a simple Component which renders different kind of Input fields like Text, TextArea etc based on the parameters we are sending. Then we need some kind of If/Else or Switch statements to select the case.
Following Plunker demonstrates working example of a ngWitchCase statement.



Here is the link to the Plunker to try it out.
https://plnkr.co/edit/AliFkb?p=catalogue

No comments :

Post a Comment