Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8


Angular 8 Conclusion

ngSwitch Directive in Angular 8

Angular 8 ng-Switch Directive

The ng-Switch Directive hides and shows the HTML elements depending on an expression.

Child elements with the ng-switch-when directive will be displayed if it gets a match; otherwise, the component and its children will be removed.

We could also define a default section, by using the ng-switch default directive, to show a section if no any other part gets a match.




In Angular ngSwitchCase directive, the inner elements are placed inside the container element. It is applied to the inner elements with a match expression. When the value of the match expression matches the value of switch expression, the correlated inner element is added in the DOM. All other inner elements are removed from the DOM.

If there is more than one match, then all the matching elements are added to the DOM.


We can apply the ng-switchDefault directive in Angular 8. The element with ngSwitchDefault is displayed if no match found. The inner element with ngSwitchDefault can be placed anywhere inside the container element and not necessarily at the bottom line. If we add more than ngSwitchDefault directive, and all of them are displayed.

Any elements placed inside the container element, but outside the ngSwitchCase or ngSwitchDefault elements are displayed the same as it is.

ngSwitch Directive Example

Write the given code in app.component.ts file of the application:

class item {
name: string;
val: number; 
export class AppComponent 
Items: item[ ]=[{name: ’one’,val: 1},
{ name: ’two’,val: 2},{name: ‘three’, val: 3}];
selectedValue: string=’one’; 

Use the below code in the app.component.html file of the application.

One is pressed
Two is pressed
;Default Option