In several programming languages, such as Java, JavaScript, and TypeScript, the switch statement does not work in isolation. It works in concert with other statements and keywords—namely, case and default. Angular's NgSwitch directive works exactly the same way, in that NgSwitch works in concert with NgCase and NgDefault.

Let's flesh out a slightly larger example here by creating a component that will contain our car data, our styling, and our template, which makes use of NgSwitch, with NgCase and NgDefault:

@Component({
  selector: 'car-hp',
  template: `
    <h3>Cars styled by their HP range</h3>
    <ul *ngFor="let car of cars" [ngSwitch]="car.horsepower"> 
      <li *ngSwitchCase="car.horsepower >= 375" class="super-car">
        {{ car.make }} {{ car.model }} 
      </li>
      <li *ngSwitchCase="car.horsepower >= 200 && car.horsepower 
          < 375" class="sports-car">
        {{ car.make }} {{ car.model }}
      </li>
      <li *ngSwitchDefault class="grandma-car">
        {{ car.make }} {{ car.model }}
      </li>
    </ul>
  `,
  styles: [`
    .super-car {
      color:#fff;
      background-color:#ff0000;
    },
    .sports-car {
      color:#000;
      background-color:#ffa500; 
    },
    .grandma-car {
      color:#000;
      background-color:#ffff00; 
    } 
  `],
  encapsulation: ViewEncapsulation.Native 
})
class CarHorsepowerComponent {
  cars: any[] = [
    {
      "make": "Ferrari",
      "model": "Testerosa",
      "horsepower": 390
    },
    {
      "make": "Buick",
      "model": "Regal",
      "horsepower": 182 
    }, 
    {
      "make": "Porsche",
      "model": "Boxter",
      "horsepower": 320
    }, 
    {
      "make": "Lamborghini",
      "model": "Diablo",
      "horsepower": 485
    }
  ];
}

In the preceding code, we've constructed a complete component named 
CarHorsepowerComponent. Within the parent component template, Angular will replace instances of our custom HTML element, <car-hp>, with the template we've created in our CarHorsepowerComponent (this is because we assigned car-hp to the selector property of the component annotation of our CarHorsepowerComponent class).

We've also included the data for the collection we're passing to the NgFor directive within our component class, as opposed to it being inline within the expression assigned to the NgFor directive, as we did in a previous example.

This was a simple example whose template iterates through our cars collection, and applies one of three styles to the make and model of the cars based on the current car's horsepower—and this is accomplished via the NgSwitch, NgCase, and NgDefault directives. Specifically, here's the result:

• If the car's horsepower is equal to or greater than 375 HP, we're going to consider it to be a supercar and will have the car's make and model rendered in white font with a red background
• If the car's horsepower is equal to or greater than 200 HP, but less than 375 HP, we're going to consider it to only be a sports car and will have the car's make and model rendered in black font with an orange background
• If the car's horsepower is anything under 200 HP, which is our default (or catch-all) case, we're going to consider it to be a car that is suitably safe for a grandmother to drive, and will have the car's make and model rendered in black font with a yellow background—because most grandmothers find the color scheme of honey bees to be attractive

Of course, the grandmother comment was for entertainment value only, and I'm not trying to intentionally offend anyone who drives a car that takes a full 8 seconds, or more, to accelerate from 0 to 60 MPH (wink). Truth be told, one of my cars (a 2016 Honda Civic) only has 158 HP—and believe me, I've been passed on the road going uphill by a grandmother driving an Infinity Q50. That's why I bought something more powerful within the next couple of days after that horrible experience (big smile).

One last thing I wanted to point out in this previous example is the way in which the NgSwitch directive was used. You'll note that I wrote it in a different format, namely [ngSwitch]="car.horsepower", instead of *ngSwitch="car.horsepower". This is because there is a rule that Angular imposes on us when it comes to structural directives, which is that we cannot have more than one structural directive using the asterisk symbol prepending the directive's name. To work around this, we used the property binding symbol, [ ] (a pair of square brackets).