Explicación Signals

5. Componente flujo-switch

Explicación 

Código final del ts

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-flujo-switch',
  standalone: true,
  templateUrl: './flujo-switch.component.html',
  styleUrl: './flujo-switch.component.css',
})
export class FlujoSwitchComponent {

  // Lista de roles disponibles
  roles = ['admin', 'editor', 'suscriptor', 'invitado'];

  // Signal que almacena el rol seleccionado
  rol = signal<string>('admin');

  cambiarRol(valor: string) {
    this.rol.set(valor);
  }
}

Plantilla final del html

<h2>Ejemplo con @switch</h2>

<label>Selecciona un rol:</label>
<select (change)="cambiarRol($event.target.value)">
  @for (r of roles; track r) {
    <option [value]="r">{{ r }}</option>
  }
</select>

<p>Rol actual: <strong>{{ rol() }}</strong></p>

<!-- Aquí entra el flujo @switch -->
@switch (rol()) {

  @case ('admin') {
    <p>Acceso completo al sistema.</p>
  }

  @case ('editor') {
    <p>Puedes editar contenido, pero no administrar usuarios.</p>
  }

  @case ('suscriptor') {
    <p>Puedes acceder al contenido pero no modificarlo.</p>
  }

  @default {
    <p>Rol invitado: acceso limitado.</p>
  }

}

Css para mejorar la presentación 

label {
  margin-right: 8px;
}

select {
  margin-bottom: 10px;
}

p {
  font-size: 1.05rem;
  margin-top: 8px;
}

Importrarlo en app.components.ts

import { Component } from '@angular/core';
import { FlujoSwitchComponent } from './components/flujo-switch/flujo-switch.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FlujoSwitchComponent],
  template: `
    <app-flujo-switch></app-flujo-switch>
  `
})
export class AppComponent {}

O bien mostrar todos los flujos

import { Component } from '@angular/core';
import { FlujoIfComponent } from './components/flujo-if/flujo-if.component';
import { FlujoForComponent } from './components/flujo-for/flujo-for.component';
import { FlujoSwitchComponent } from './components/flujo-switch/flujo-switch.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FlujoIfComponent, FlujoForComponent, FlujoSwitchComponent],
  template: `
    <app-flujo-if></app-flujo-if>
    <hr />
    <app-flujo-for></app-flujo-for>
    <hr />
    <app-flujo-switch></app-flujo-switch>
  `
})
export class AppComponent {}