For the container element, there is the ngSwitch directive and an activation expression.
The ngSwitch directive will take the result of the activation expression and match it with the labels of the sub elements. If it finds a match, it will activate and display the view that matched the result.
Label them 1, 2, and 3 by using the shorthand syntax of the ngSwitchCase directive. Then, apply the ngSwitch directive to the container element and use the compact syntax to begin inputting the activation expression.
Go to the app component TypeScript file, declare a variable, and give it a value of 1.
Go back to the app component HTML page and insert the variable into the ngSwitch directive.
As you can see, it is displaying view 1. If we change the value of the variable to 3, it will display the 3rd view since the label matches the value 3.
To display something even if there are no matching labels, we need to add an additional view and give it a special label that lets the ngSwicth directive know to use the view when no matches are found.
To tell the ngSwicth directive to use this element when it can’t find a match, we need to apply the ngSwitchDefault directive to it.
As you can see, it is displaying the default view.
©2019 - 2023 Codeible. All rights reserved.