En Angular, un componente es un bloque fundamental de la arquitectura de la aplicación. Puedes pensar en un componente como una unidad modular y reutilizable que encapsula la lógica, la presentación y el comportamiento de una parte específica de la interfaz de usuario. Cada componente tiene su propio conjunto de archivos que definen su estructura y comportamiento.

¿Te gustaría convertirte en un desarrollador web full stack? Aquí tienes una ruta de aprendizaje que te guiará desde los fundamentos hasta el nivel profesional. Son más de 20 cursos que te enseñarán todo lo que necesitas saber. Enlace: Ruta de aprendizaje – Desarrollo Web – Azul School

Los componentes en Angular constan de tres partes principales:

1.- Clase del Componente (archivo .ts): La clase del componente define la lógica del componente utilizando TypeScript. Aquí se manejan las variables, funciones y propiedades que controlan el comportamiento del componente.

// Ejemplo de clase de componente
import { Component } from '@angular/core';

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
})
export class PageComponent {
  // Lógica del componente
}

2.- Plantilla del Componente (archivo .html): La plantilla define la estructura HTML que se renderizará cuando se use el componente. Puedes incluir enlaces a propiedades y métodos definidos en la clase del componente.

<!-- Ejemplo de plantilla de componente -->
<div>
  <h1>{{ titulo }}</h1>
  <p>{{ contenido }}</p>
</div>

3.- Estilos del Componente (archivo .css): Este archivo contiene los estilos CSS específicos del componente. Los estilos son aplicados solo al componente y se encapsulan para evitar conflictos con otros estilos en la aplicación.

/* Ejemplo de estilos de componente */
div {
  border: 1px solid #ccc;
  padding: 10px;
}

Cuando ejecutas ng g component page/, Angular CLI crea automáticamente estos archivos para tu nuevo componente en la ubicación especificada, y puedes comenzar a personalizarlos para adaptarse a las necesidades específicas de esa parte de tu aplicación. Los componentes son esenciales para la construcción de aplicaciones Angular modulares y mantenibles.