Explicación Signals

Explicación

Vamos a trabajar con el @if.

El objetivo es que la señal controla el valor y Angular controla la actualización del a interfaz

Ahora mismo tenemos creado

src/app/components/flujo-if/flujo-if.component.ts
src/app/components/flujo-if/flujo-if.component.html
src/app/components/flujo-if/flujo-if.component.css

Código actual del js:

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

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

export class FlujoIfComponent {}

Modificaciones:

En Angular usamos signals para manejar valores que cambian con el tiempo.

Una señal es como una “variable reactiva”: cada vez que cambia, Angular actualiza la vista automáticamente sin que tengamos que hacer nada más.

• Creamos una señal para guardar el valor, gracias a esto podremos:
  • Asignar un valor por defecto (0)
  • Leer el valor para saber cuál es: edad()

edad = signal<number>(0);

• Creamos un método que trabaja con esa señal
  • Modificamos el valor con un método de signal: .set(nuevoValor)

actualizarEdad(valor: string) {
  const numero = Number(valor);
  this.edad.set(isNaN(numero) ? 0 : numero);
}

Código final

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

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

  // Signal que almacena la edad introducida
  edad = signal<number>(0);

  actualizarEdad(valor: string) {
    const numero = Number(valor);
    this.edad.set(isNaN(numero) ? 0 : numero);
  }
}

Ahora en nuestra plantilla 

Resultado final: 

Primero creamos una señal para guardar un dato que queremos controlar, en este caso la edad.

Luego creamos un método que modifica esa señal.

Angular detecta automáticamente cuando la señal cambia, y actualiza el HTML sin necesidad de detectores ni suscripciones.

Por eso, el @if cambia solo cuando la señal cambia.

Código que incorporarmos en la plantilla html

src/app/components/flujo-if/flujo-if.component.html

Vamos a incluir un input, que cuando el usuario escribe en el campo numérico, se dispara el evento (input), llamará al método del componente actualizarEdad() y al pasarle la edad, la actualiza la señal con el valor nuevo

<input type="number" (input)="actualizarEdad($event.target.value)" />

@if (edad() < 18) {
  <p>Menor de edad</p>
} @else {
  <p>Mayor de edad</p>
}