Search⌘ K
Home
Courses
Angular: Designing and Architecting Web Applications

The ngSwitch Directive

Explore how to apply the ngSwitch directive in Angular for managing conditional content rendering in templates. Understand how to create switch cases that control UI elements based on data properties. This lesson helps you implement modular and clear conditional logic in Angular applications using switch-case syntax, enhancing template structure and readability.

We'll cover the following...

The next directive we’ll be looking at is the ngSwitch directive. In JavaScript, there are two ways to run code conditionally. There’s if/else and switch/case. The ngSwitch directive allows you to use the switch/case syntax in your templates.

Updating the data

We’re going to update our data in the app.component.ts file where each object in the images array will have a property called downloadable.

export class AppComponent {
  images = [
    {
      title: 'Title #1',
      url: 'https://images.unsplash.com/photo-1588750099599-09efbe4377ad?
...