In this video we are going to learn about ngSwitch Directive.
The [ngSwitch] directive on a container specifies an expression to match against.
The expressions to match are provided by ngSwitchCase directives on views within the container.
Every view that matches is rendered.
If there are no matches, a view with the ngSwitchDefault directive is rendered.
Now lets see how can we use ngSwtich Directives in angular 10.
So switch to the project and just go to the app.component.html file and write the following code.

<div [ngSwitch]=\"color\">
  <div class=\"red box\" *ngSwitchCase=\"'red'\">
    <p>Red Color</p>
  </div>
  <div class=\"green box\" *ngSwitchCase=\"'green'\">
    <p>Green Color</p>
  </div>
  <div class=\"blue box\" *ngSwitchCase=\"'blue'\">
    <p>Blue Color</p>
  </div>
  <div class=\"default box\" *ngSwitchDefault>
    <p>Default Color</p>
  </div>
</div>

Now lets create some css class so goto the app.component.css.

.box{
  height:200px;
  width:200px;
  text-align:center;
  border:1px solid;
}
.red{
  background-color:red;
}
.green{
  background-color:green;
}
.blue{
  background-color:blue;
}
.default{
  background-color:#fff;
}

Now lets check it.
So switch to browser and here you see the green square.
If I change the color.
Lets say color=\"red\".
You can see here is color is red.
If I change the color with blue.
Here color is blue.
and if I change the color with grey.
Because this color is not in switch case so it will render this ngSwitchDefault ok.
You can see here color is white.
So in this way you can us ngSwitch in Angular 10.