Angular: Template Statements (Instrucciones de plantilla)

 Template Statements

En Angular los Template Statements son expresiones que responden a eventos en las plantillas. Se utilizan para manejar eventos, ejecutar métodos y realizar asignaciones dentro de los templates. Estos statements permiten agregar lógica a las vistas para manejar interacciones del usuario, como clics de botones, cambios en entradas de texto, entre otros.

Lista de Template Statement

1. Event Binding
2. Two-way Binding
3. Template Expressions
4. Safe Navigation Operator
5. Template Reference Variables

 

Template Statements: Las instrucciones de plantilla son métodos o propiedades que se pueden utilizar en el código HTML para responder a eventos de usuario.

// Generamos el componente --inline-template llamado = data-binding
ng g c --inline-template data-binding

// Generamos sus componentes --inline-template --inline-style
ng g c --inline-template --inline-style data-binding/event-binding

ng g c --inline-template --inline-style data-binding/two-way-binding

1. Event Binding

Permite vincular eventos del DOM a métodos del componente.

// event-binding.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-event-binding',
  standalone: true,
  imports: [],
  // Agregar CDN de Bootstrap en index.html
  template: `
<input type="text" placeholder="Ingresa tu nombre" class="form-control" #name>
<button class="btn btn-primary" (click)="mostrar_en_consola(name.value)">Mostrar en Consola</button>
<button (click)="miAlerta(name.value)">Mostrar como alerta</button>
  `,
  styles: ``
})
export class EventBindingComponent {
    mostrar_en_consola(name:string){  console.log(name); }
    miAlerta(name:string) { alert(name); }
}

 

2. Two-way Binding

Permite la sincronización bidireccional de datos entre la vista y el modelo.

// two-way-binding.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-two-way-binding',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="nombre"> 
     <p> {{ nombre }}</p>
  `,
  styles: ``
})
export class TwoWayBindingComponent {
  nombre:string = '';
}

 

3. Template Expressions

Son expresiones utilizadas para enlazar datos desde el componente hacia el template. Se usan en interpolaciones y bindings, para mostrar datos y realizar cálculos simples.

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

@Component({
  selector: 'app-template-expressions',
  template: `<p>{{ 1 + 1 }}</p>
   <p>{{ user.name }}</p>
   <input [value]="user.name">
  `,
})
export class TemplateExpressionsComponent {}

4. Safe Navigation Operator (?.)

Permite acceder de manera segura a propiedades anidadas que pueden ser nulas o indefinidas. Se utiliza para prevenir errores cuando se intenta acceder a propiedades de objetos que pueden ser nulos.

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

@Component({
  selector: 'app-safe-navigation',
  template: `<p>{{ user?.name }}</p>  `,
})
export class SafeNavigationComponent {
  user: { name: string } | null = null;

import { Component } from '@angular/core';
@Component({
  selector: 'app-safe-navigation',
	<p>{{ user2?.address?.street }}</p>  `,
})
export class SafeNavigationComponent {
  user2 = { address: { street: '123 Main St' } };
}

 

5. Template Reference Variables

Permiten acceder a elementos DOM, sus propiedades y componentes hijos en la plantilla.

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

@Component({
  selector: 'app-template-reference',
  template: `
  <input #inputRef type="text"><button (click)="onClick(inputRef)">Get Value</button>
  <input #myInput>
  <button (click)="logValue(myInput.value)">Log value</button>
  `,
})
export class TemplateReferenceComponent {
  onClick(input: ElementRef) {
    alert(input.nativeElement.value);
  }
  logValue(value: string) {
    console.log(value);
  }
  }

 

Métodos, Objetos, Arrays

//  data-base.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-data-base', standalone: true, imports: [CommonModule],
  template: ` 
    <h4>Metodo: </h4>
    	<button (click)="unaAlerta()">Ejemplos Usando...</button>
    <h4>Objeto: </h4>
    	<p>Su apellido es: {{ user.lastname }}</p>
    <h4>Array: </h4>
    <ul> <li *ngFor="let item of items">{{ item }}</li> </ul>
  `,
  styles: ``
})
export class DataBaseComponent {
    title = 'Data-base';
    // Metodo
    unaAlerta() { alert('Uso de Métodos'); }
    //  Objeto
    user = {
        name: 'Milton Antonio',
        lastname: 'Rodriguez',
      };
    // Array 
    items = ['Item 1', 'Item 2', 'Item 3'];
}

Trabajando con objetos: objeto.component.ts

// objeto.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-navegacion',    standalone: true,    imports: [  ],
  template: ` 
        
Nombre: {{ user3.name }} y Edad: {{ user3.age }}
 
        
{{ user4.address.street }}
 
        `,
  styles: ``
})
export class NavegacionComponent {
    user3 = { name: 'milton', age: 28,  }
    user4 = { address: { street: '123 Main St' } };
}