Introducción a Componentes y Directivas

En Angular, los componentes y las directivas son los bloques de construcción fundamentales para crear aplicaciones dinámicas y reutilizables.

• Componentes: Representan partes específicas de la interfaz de usuario (UI) y están asociados a plantillas HTML y estilos CSS.
• Directivas: Son instrucciones para modificar el comportamiento de elementos HTML existentes o para crear elementos personalizados.

Ambos elementos trabajan juntos para definir cómo se ve y se comporta la aplicación.

Componentes: Creación y Estructura

Los componentes en Angular son clases de TypeScript decoradas con el decorador @Component, que proporciona metadatos esenciales sobre el componente.

1. Creación de un nuevo componente

Para crear un componente, Angular CLI ofrece un comando rápido:

ng generate component nombre-componente

Esto genera automáticamente la estructura del componente con los siguientes archivos:

• nombre-componente.component.ts: Lógica del componente.
• nombre-componente.component.html: Plantilla asociada.
• nombre-componente.component.css: Estilos específicos.
• nombre-componente.component.spec.ts: Archivo de pruebas.

Si prefieres hacerlo manualmente, crea un archivo .ts y define la clase con el decorador @Component:

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

@Component({
  selector: 'app-mi-componente',
  templateUrl: './mi-componente.component.html',
  styleUrls: ['./mi-componente.component.css']
})
export class MiComponenteComponent {
  // Propiedades y lógica del componente
}

2. Elementos clave del decorador @Component