Desarrollo de componentes Angular

En Angular, los componentes son bloques reutilizables que combinan lógica y vista, permitiendo construir aplicaciones modulares y mantenibles.

flowchart TD
    COMP["@Component (standalone)"] --> META["Metadatos: selector, template, styles"]
    COMP --> CLASS["Clase TypeScript"]
    CLASS --> SIGNALS["Signals: estado reactivo"]
    CLASS --> METHODS["Métodos: gestión de eventos"]
    META --> HTML["Plantilla HTML con @if/@for"]
    META --> CSS["Estilos encapsulados"]
    COMP --> CD["ChangeDetectionStrategy.OnPush (rendimiento)"]

Creación de componentes

Para crear un componente en Angular, utilizamos el comando:

ng generate component mi-componente

Cuando se ejecuta el comando anterior, la CLI de Angular generará automáticamente los siguientes archivos y directorios:

• una nueva carpeta con el nombre del componente en el directorio src/app,
• la clase TypeScript que controla la lógica,
• la plantilla HTML que define la estructura visual,
• el archivo CSS que contiene los estilos específicos del componente y
• el archivo de prueba para realizar pruebas unitarias.

Juntos, estos elementos permiten construir aplicaciones modulares y personalizables.

Estructura de un componente

Un componente en Angular se define utilizando la clase @Component. Esta clase es un decorador que acepta un objeto de metadatos como argumento.

El objeto de metadatos define las propiedades clave del componente, como el selector, la plantilla, los estilos y las animaciones.

A continuación se muestra un ejemplo básico de un componente en Angular:

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

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Mi Aplicación Angular';
}

En Angular 21, todos los componentes son standalone por defecto, por lo que no es necesario especificar standalone: true.

Propiedades del decorador @Component

• Selector: Define cómo se utilizará el componente en una plantilla HTML. Puede ser un nombre de elemento, un nombre de atributo, o una clase CSS.
• Template/TemplateUrl: Define la estructura HTML del componente. Puede ser una cadena de HTML directamente en el objeto de metadatos usando template, o referenciar un archivo HTML externo usando templateUrl.
• Styles/StyleUrl: Define los estilos CSS para el componente. Puede ser una cadena CSS directamente en el objeto de metadatos usando styles, o referenciar un archivo CSS externo usando styleUrl.
• Imports: Permite importar otros componentes, directivas o módulos directamente en el componente. En este ejemplo, imports: [RouterOutlet] se utiliza para incluir el RouterOutlet, lo cual es útil para aplicaciones que utilizan enrutamiento.

Ejemplo de un componente

Clase TypeScript

Supongamos que se desea crear un componente llamado user-profile que muestra la información básica de un usuario.

El siguiente ejemplo demuestra cómo se podría crear este componente en Angular:

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

@Component({
    selector: 'app-user-profile', // Selector utilizado en el HTML
    templateUrl: './user-profile.component.html', // Ruta de la plantilla HTML
    styleUrl: './user-profile.component.css' // Ruta de los estilos CSS
})
export class UserProfileComponent {
    userName: string = 'Usuario Ejemplo';
    userAge: number = 25;
}

La clase UserProfileComponent contiene los datos del usuario y puede tener métodos para manejar eventos o realizar operaciones relacionadas con este componente.

Plantilla HTML

<!-- En el archivo user-profile.component.html -->
<div class="user-profile">
    <h2>{{ userName }}</h2>
    <p>Edad: {{ userAge }}</p>
</div>

Estilos CSS

/* En el archivo user-profile.component.css */
.user-profile {
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f5f5f5;
    text-align: center;
}

Uso del componente

Una vez creado el componente, se puede utilizar en otras partes de la aplicación mediante su selector, como se muestra a continuación:

<!-- En el archivo src/app/app.component.html -->
<app-user-profile></app-user-profile>

Ejecución de la aplicación

Finalmente, para ejecutar la aplicación, se utiliza el siguiente comando de Angular CLI:

ng serve

Luego, en un navegador web, navegar hacia http://localhost:4200 para observar el componente de user-profile en funcionamiento.