En Angular, los componentes son la piedra angular de cualquier aplicación. Un componente en Angular es una pieza de la interfaz de usuario (UI) que se puede reutilizar y que encapsula su propia lógica, plantilla y estilos. En esta sección, aprenderemos qué son los componentes, cómo funcionan y por qué son esenciales para el desarrollo de aplicaciones en Angular.

Un componente en Angular es una clase TypeScript que interactúa con una plantilla HTML para definir una vista. Cada componente tiene tres partes principales:

1. Clase: Define la lógica y los datos del componente.
2. Plantilla: Define la estructura y el contenido HTML del componente.
3. Estilos: Define los estilos CSS específicos del componente.

Un componente típico en Angular se ve así:

• @Component: Es un decorador que marca una clase como un componente Angular y proporciona metadatos sobre el componente.
• selector: Es el nombre del elemento HTML que representa el componente.
• templateUrl: Es la ruta al archivo HTML que define la plantilla del componente.
• styleUrls: Es la ruta al archivo CSS que define los estilos del componente.

La plantilla de un componente define su estructura HTML. Aquí hay un ejemplo de una plantilla simple:

En este ejemplo, {{ titulo }} es una expresión de interpolación que muestra el valor de la propiedad titulo de la clase del componente.

Los estilos de un componente definen su apariencia. Aquí hay un ejemplo de un archivo de estilos:

Los componentes en Angular tienen un ciclo de vida que incluye varias etapas desde su creación hasta su destrucción. Angular proporciona varios métodos de ciclo de vida que puedes usar para ejecutar lógica en diferentes etapas del ciclo de vida de un componente.

1. ngOnInit: Se llama una vez que el componente ha sido inicializado.
2. ngOnChanges: Se llama cada vez que se cambian las propiedades de entrada vinculadas.
3. ngOnDestroy: Se llama justo antes de que el componente sea destruido.

Ejemplo:

Crear un componente simple que muestre un mensaje de bienvenida y cambie el color del texto al hacer clic en un botón.

1. Crear el Componente:

   • Usa Angular CLI para generar un nuevo componente.

   ng generate component bienvenida
   

2. Modificar la Clase del Componente:

   • Abre bienvenida.component.ts y agrega una propiedad para el mensaje y un método para cambiar el color del texto.

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-bienvenida',
     templateUrl: './bienvenida.component.html',
     styleUrls: ['./bienvenida.component.css']
   })
   export class BienvenidaComponent {
     mensaje: string = 'Bienvenido a Angular!';
     color: string = 'black';
   
     cambiarColor() {
       this.color = this.color === 'black' ? 'blue' : 'black';
     }
   }
   

3. Modificar la Plantilla del Componente:

   • Abre bienvenida.component.html y agrega el HTML para mostrar el mensaje y el botón.

   <h1 [style.color]="color">{{ mensaje }}</h1>
   <button (click)="cambiarColor()">Cambiar Color</button>
   

4. Modificar los Estilos del Componente:

   • Abre bienvenida.component.css y agrega estilos si es necesario.

   h1 {
     font-family: Arial, sans-serif;
   }
   
   button {
     margin-top: 10px;
   }
   

5. Incluir el Componente en la Aplicación:

   • Abre app.component.html y agrega el selector del nuevo componente.

   <app-bienvenida></app-bienvenida>
   

El código completo del componente BienvenidaComponent debería verse así:

bienvenida.component.ts:

bienvenida.component.html:

bienvenida.component.css:

app.component.html:

En esta sección, hemos aprendido qué son los componentes en Angular, cómo se estructuran y cómo funcionan. También hemos explorado el ciclo de vida de un componente y creado un componente simple como ejercicio práctico. Los componentes son fundamentales para construir aplicaciones modulares y reutilizables en Angular. En la próxima sección, profundizaremos en cómo crear componentes y cómo interactúan entre sí.