Flujo de Control Angular @if

A veces debemos decidir que le mostramos y que no al usuario según unas propiedades. Angular nos permite hacer esto a través de @if, una directiva que nos permite decidir si mostrar o no cierto contenido según una expresión.

Cabe mencionar que @if está disponible sólo en versiones de Angular superiores a la 17. Y que reemplaza a la directiva *ngIf que se encontraba en antiguas versiones.

Ejemplo:

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

@Component({
	selector: 'app-cafe',
	template: `
		@if(cafe) {
            <span> Aquí tienes tu café. </span>
        } @else {
        	<span> No hay café para ti.</span>
        }
    `,
    styles: [':host{background-color:white}']
})
export class Cafe{
	cafe : boolean = true;
}