When you have a number of conditional expressions to evaluate, then you can use the IF-ELSE or Switch case statements. Adding a Switch case make the code more readable and easy to maintain. For this reason, most of the developers use Switch over IF-ELSE to make their code look compact and more graceful.
In this tutorial, you will learn how to add a Switch case expression in Angular application using the TypeScript coding standards.
TLDR;
For those who are in hurry 🙂
switch (valueType) {
case 'add-only-height':
this.addHeight(value);
break;
case 'add-only-width':
this.addWidht(value);
break;
default:
this.addHeight(value);
this.addWidht(value);
break;
}
You can also wrap each case around braces {}
to leverage the block scope. For example, you can use let
or const
variables inside each case with their own block scope.
switch (valueType) {
case 'add-only-height': {
let offset_h = 3;
this.addHeight(value+offset_h);
break;
}
case 'add-only-width': {
let offset_w = 3;
this.addWidht(value+offset_w);
break;
}
default: {
this.addHeight(value);
this.addWidht(value);
break;
}
}
Example of a Switch statement in Component class function:
maintainDimentions(valueType: string, value: number) {
switch (valueType) {
case 'add-only-height':
this.addHeight(value);
break;
case 'add-only-width':
this.addWidht(value);
break;
default:
this.addHeight(value);
this.addWidht(value);
break;
}
}
addHeight(value: number) {
// Increase Height
}
addWidht(value: number) {
// Increase Widht
}
The above function can be called from HTML template as shown below:
<button (click)="maintainDimentions('add-only-height',10)">Height</button>
<button (click)="maintainDimentions('add-only-width',10)">Width</button>
<button (click)="maintainDimentions('both',10)">Both</button>
This is a quick and handy example of Switch case statement usage in the TypeScript Class that we use in Angular components.
Leave a Reply