Comprender los componentes de Angular

Los componentes son los bloques de construcción de las aplicaciones de Angular. En esta lección, aprenderá sobre los componentes y su ciclo de vida.

¿Qué es un componente?

Un componente es una parte de la interfaz de usuario que incluye código HTML, CSS y TypeScript. Representa una parte de la interfaz de usuario de la aplicación.

Crear un componente

Use Angular CLI para crear un componente fácilmente:

ng generate component my-component

ng generate component my-component

Estructura de un componente

Un componente de Angular suele tener cuatro archivos principales:

• .html: plantilla
• .ts: lógica
• .css: estilos
• .spec.ts: pruebas

Decorador de componentes

El decorador @Component conecta la clase del componente con su plantilla y sus estilos.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

Hooks del ciclo de vida

Los componentes de Angular tienen hooks del ciclo de vida que le permiten ejecutar código en momentos específicos. Entre los hooks habituales se incluyen ngOnInit() y ngOnDestroy().

Usar ngOnInit()

ngOnInit() se ejecuta después de que Angular inicializa los datos del componente. Es ideal para la configuración inicial:

ngOnInit() {
  console.log('Component initialized!');
}

Mostrar componentes

Use el selector de su componente en otras plantillas para mostrarlo:

<app-my-component></app-my-component>

Resumen

Ha aprendido sobre los componentes, cómo crearlos y sus hooks del ciclo de vida. ¡Muy bien!