El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Plantillas de Componentes

Siguiente ►
►

Introducción

En Angular, las plantillas de componentes son una parte fundamental del desarrollo de aplicaciones. Una plantilla define la vista de un componente, es decir, cómo se presenta y se estructura el contenido en la interfaz de usuario. En esta sección, aprenderemos cómo crear y utilizar plantillas de componentes en Angular.

Contenidos

  1. ¿Qué es una Plantilla de Componente?
  2. Sintaxis de Plantillas
  3. Interpolación
  4. Enlace de Propiedades
  5. Enlace de Eventos
  6. Uso de Directivas
  7. Ejemplo Práctico
  8. Ejercicio Práctico
  9. Conclusión

¿Qué es una Plantilla de Componente?

Una plantilla de componente en Angular es un fragmento de HTML que define la estructura y el diseño de la vista del componente. Las plantillas pueden incluir elementos HTML, directivas de Angular, enlaces de datos y más.

Sintaxis de Plantillas

Las plantillas de componentes se definen dentro del decorador @Component en el archivo TypeScript del componente. Aquí hay un ejemplo básico:

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

@Component({
  selector: 'app-mi-componente',
  template: `
    <h1>{{ titulo }}</h1>
    <p>{{ descripcion }}</p>
  `,
  styles: [`
    h1 {
      color: blue;
    }
  `]
})
export class MiComponente {
  titulo = 'Hola, Angular!';
  descripcion = 'Esta es una descripción de ejemplo.';
}

En este ejemplo, la plantilla está definida dentro del decorador @Component usando la propiedad template.

Interpolación

La interpolación es una técnica que permite insertar valores de propiedades del componente en la plantilla. Se utiliza la sintaxis {{ propiedad }}.

<h1>{{ titulo }}</h1>

En el ejemplo anterior, {{ titulo }} se reemplazará con el valor de la propiedad titulo del componente.

Enlace de Propiedades

El enlace de propiedades permite vincular propiedades de elementos HTML a propiedades del componente. Se utiliza la sintaxis [propiedad]="valor".

<img [src]="imagenUrl" alt="Imagen de ejemplo">

En este ejemplo, el atributo src del elemento img se enlaza a la propiedad imagenUrl del componente.

Enlace de Eventos

El enlace de eventos permite manejar eventos del DOM en el componente. Se utiliza la sintaxis (evento)="metodo($event)".

<button (click)="mostrarMensaje()">Haz clic aquí</button>

En este ejemplo, el evento click del botón se enlaza al método mostrarMensaje del componente.

Uso de Directivas

Las directivas son instrucciones especiales que pueden modificar el comportamiento o la apariencia de los elementos en la plantilla. Angular proporciona varias directivas incorporadas, como *ngIf y *ngFor.

Directiva *ngIf

La directiva *ngIf se utiliza para mostrar u ocultar elementos basándose en una condición.

<p *ngIf="mostrar">Este párrafo se muestra si 'mostrar' es verdadero.</p>

Directiva *ngFor

La directiva *ngFor se utiliza para iterar sobre una colección y generar un elemento para cada ítem.

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

Ejemplo Práctico

Vamos a crear un componente que muestre una lista de tareas. Cada tarea tendrá un título y una descripción.

Código del Componente

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

@Component({
  selector: 'app-tareas',
  template: `
    <h1>Lista de Tareas</h1>
    <ul>
      <li *ngFor="let tarea of tareas">
        <h2>{{ tarea.titulo }}</h2>
        <p>{{ tarea.descripcion }}</p>
      </li>
    </ul>
  `,
  styles: [`
    h1 {
      color: green;
    }
    h2 {
      color: darkblue;
    }
  `]
})
export class TareasComponent {
  tareas = [
    { titulo: 'Tarea 1', descripcion: 'Descripción de la tarea 1' },
    { titulo: 'Tarea 2', descripcion: 'Descripción de la tarea 2' },
    { titulo: 'Tarea 3', descripcion: 'Descripción de la tarea 3' }
  ];
}

Explicación

  1. Definición del Componente: El componente TareasComponent se define con el decorador @Component.
  2. Plantilla: La plantilla incluye un título y una lista de tareas. La directiva *ngFor se utiliza para iterar sobre la lista de tareas y generar un elemento li para cada tarea.
  3. Estilos: Los estilos se definen dentro del decorador @Component y se aplican a los elementos h1 y h2.

Ejercicio Práctico

Ejercicio

Crea un componente que muestre una lista de productos. Cada producto debe tener un nombre, una descripción y un precio. Utiliza interpolación, enlace de propiedades y directivas en la plantilla.

Solución

Código del Componente

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

@Component({
  selector: 'app-productos',
  template: `
    <h1>Lista de Productos</h1>
    <ul>
      <li *ngFor="let producto of productos">
        <h2>{{ producto.nombre }}</h2>
        <p>{{ producto.descripcion }}</p>
        <p>Precio: {{ producto.precio | currency }}</p>
      </li>
    </ul>
  `,
  styles: [`
    h1 {
      color: purple;
    }
    h2 {
      color: darkred;
    }
  `]
})
export class ProductosComponent {
  productos = [
    { nombre: 'Producto 1', descripcion: 'Descripción del producto 1', precio: 100 },
    { nombre: 'Producto 2', descripcion: 'Descripción del producto 2', precio: 200 },
    { nombre: 'Producto 3', descripcion: 'Descripción del producto 3', precio: 300 }
  ];
}

Explicación

  1. Definición del Componente: El componente ProductosComponent se define con el decorador @Component.
  2. Plantilla: La plantilla incluye un título y una lista de productos. La directiva *ngFor se utiliza para iterar sobre la lista de productos y generar un elemento li para cada producto.
  3. Interpolación: Se utiliza interpolación para mostrar el nombre, la descripción y el precio de cada producto.
  4. Pipe currency: El pipe currency se utiliza para formatear el precio como una moneda.

Conclusión

En esta sección, hemos aprendido sobre las plantillas de componentes en Angular, incluyendo la sintaxis básica, la interpolación, el enlace de propiedades y eventos, y el uso de directivas. También hemos visto un ejemplo práctico y un ejercicio para reforzar los conceptos aprendidos. Con este conocimiento, estás preparado para crear y utilizar plantillas de componentes en tus aplicaciones Angular. En la próxima sección, exploraremos los estilos de componentes y cómo aplicarlos de manera efectiva.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados