Tutorial Angular: Desarrollo de componentes Angular

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

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',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Mi Aplicación Angular';
}

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/StyleUrls: 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 styleUrls.
• Standalone: Indica que el componente es independiente, lo que significa que no necesita ser declarado en ningún módulo. Esta es una característica introducida en Angular 14 para simplificar la gestión de módulos.
• Imports: Permite importar otros componentes, directivas o servicios 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
    styleUrls: ['./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.