This guide was written for Angular 2 version: 2.0.0
The ng-switch
directive in Angular 1.x allows us to dynamically control what DOM element is visible based on some pre-defined condition. When the value being evaluated changes, we are essentially switching what DOM element we want to make visible. In this guide we'll be converting an Angular 1.x ng-switch
directive into Angular 2's ngSwitch
directive.
In Angular 1.x, we will use ng-switch
to dynamically toggle between layouts based on our selection. It works very much like a common switch
statement in programming and so let's get started!
Before we can use the ng-switch
directive in our template, we need to first set up our controller with the correct properties and methods. We have a currentView
property to keep track of our current view and a setCurrentView
method to set the current view. We also have a turtles
collection that we will use within our ng-switch
statement to render a list of turtles.
With our foundation in place, let's check out how we will set the current view within our template. We have a toolbar with three buttons that when clicked, call $ctrl.setCurrentView
with the view that the user wants to see. The user can select between a list view, a dense list view or a grid view which will cause the collection to be rendered differently for each selection.
And this is where we introduce the ng-switch
directive into our template. We want to switch the visibility of our DOM elements based on the value of $ctrl.currentView
and so we will create a div
element and add ng-switch="$ctrl.currentView"
to it. There are two sub-directives when using ng-switch
and those are ng-switch-when
and ng-switch-default
. We have also added three containers to hold our layout variations and added the ng-switch-when
directive to each one with the criteria for when it should be shown. For instance, when the user clicks the GRID
button, it will set $ctrl.currentView
to grid
which will in turn, active the ng-switch-when="grid"
directive.
We also are using ng-switch-default
to display a default element when no criteria is met within the preceding ng-switch-when
directives.
For demonstration purposes, you can see the entirety of the template below.
The Angular 2 implementation of the ng-switch
is called ngSwitch
, purposely in camelCase. The implementation is almost exactly the same with a few variations in naming conventions.
As in the Angular 1.x version, we need to set up our component class to satisfy our template. We have a currentView
property to keep track of our current view and a setCurrentView
method to set the currentView
property. We also have a turtles
collection for use within the ngSwitch
blocks.
Within our toolbar, we have three buttons that capture the click
event and calls setCurrentView
with the appropriate view the user has selected.
And this is where things get interesting. Because of the new binding syntax in Angular 2, we need to bind the value of currentView
to the ngSwitch
directive using attribute binding as seen here [ngSwitch]="currentView"
. The naming convention has changed from ng-switch-when
to ngSwitchCase
and pay close to attention to the fact that we are evaluating this as a string. You will also notice that we are using a *
within our template, which we will explain in the next section.
We also have the ability to display a default element if no criteria is met using the ngSwitchDefault
directive.
For reference, here is the template in its entirety.
Angular 2 uses the *
operator as a convenience operator to abstract how templates are compiled under the hood. Built-in directives that perform DOM manipulation implicitly use the template
tag to insert elements. Because this is a bit more verbose, the *
operator was introduced as syntactic sugar to save time and space. There is nothing that is keeping us from using the expanded syntax and in fact, it would look something like this.
This is what gets generated by the Angular 2 compiler at runtime but thanks to the *
operator, the burden of having to write this out is alleviated.
Todd Motto (@toddmotto) is a Google Developer Expert from England, UK. He's taught millions of developers world-wide through his blogs, videos, conferences and workshops. He focuses on teaching Angular and JavaScript courses over on Ultimate Courses.