El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En Angular, los componentes son las piezas fundamentales de la interfaz de usuario. Cada componente encapsula una parte de la interfaz y su lógica asociada. En esta sección, aprenderemos cómo crear y utilizar componentes en Angular.

¿Qué es un Componente?

Un componente en Angular es una clase que interactúa con una vista HTML a través de un decorador @Component. Los componentes son responsables de manejar la lógica de la aplicación y la presentación de la interfaz de usuario.

Estructura de un Componente

Un componente típico en Angular consta de:

Clase TypeScript: Define la lógica del componente.
Decorador @Component: Proporciona metadatos sobre el componente.
Plantilla HTML: Define la estructura de la interfaz de usuario.
Estilos CSS: Define la apariencia del componente.

Creación de un Componente

2.1. Usando Angular CLI

Angular CLI (Command Line Interface) es una herramienta poderosa que facilita la creación de componentes. Para crear un componente, utilizamos el siguiente comando:

ng generate component nombre-del-componente

Por ejemplo, para crear un componente llamado mi-componente:

ng generate component mi-componente

Este comando generará los siguientes archivos:

mi-componente.component.ts: Clase del componente.
mi-componente.component.html: Plantilla del componente.
mi-componente.component.css: Estilos del componente.
mi-componente.component.spec.ts: Archivo de pruebas del componente.

2.2. Manualmente

También podemos crear un componente manualmente. A continuación, se muestra cómo hacerlo paso a paso.

Paso 1: Crear la Clase del Componente

Primero, creamos un archivo TypeScript para la clase del componente. Por ejemplo, mi-componente.component.ts:

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

@Component({
  selector: 'app-mi-componente',
  templateUrl: './mi-componente.component.html',
  styleUrls: ['./mi-componente.component.css']
})
export class MiComponenteComponent {
  titulo: string = 'Hola, Angular!';
}

Paso 2: Crear la Plantilla HTML

Luego, creamos un archivo HTML para la plantilla del componente. Por ejemplo, mi-componente.component.html:

<div>
  <h1>{{ titulo }}</h1>
</div>

Paso 3: Crear los Estilos CSS

A continuación, creamos un archivo CSS para los estilos del componente. Por ejemplo, mi-componente.component.css:

h1 {
  color: blue;
}

Paso 4: Registrar el Componente en un Módulo

Finalmente, registramos el componente en un módulo de Angular. Por ejemplo, en app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MiComponenteComponent } from './mi-componente/mi-componente.component';

@NgModule({
  declarations: [
    AppComponent,
    MiComponenteComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Uso del Componente

Para utilizar el componente en una plantilla, simplemente usamos su selector. Por ejemplo, en app.component.html:

<app-mi-componente></app-mi-componente>

Ejercicio Práctico

Ejercicio 1: Crear un Componente de Bienvenida

Objetivo: Crear un componente llamado bienvenida que muestre un mensaje de bienvenida.
Pasos:
- Usa Angular CLI para generar el componente.
- Modifica la clase del componente para incluir una propiedad mensaje con el valor "¡Bienvenido a Angular!".
- Actualiza la plantilla HTML para mostrar el mensaje.
- Usa el componente en app.component.html.

Solución

Generar el componente:

ng generate component bienvenida

Modificar la clase del componente (bienvenida.component.ts):

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

@Component({
  selector: 'app-bienvenida',
  templateUrl: './bienvenida.component.html',
  styleUrls: ['./bienvenida.component.css']
})
export class BienvenidaComponent {
  mensaje: string = '¡Bienvenido a Angular!';
}

Actualizar la plantilla HTML (bienvenida.component.html):

<div>
  <h1>{{ mensaje }}</h1>
</div>

Usar el componente en app.component.html:

<app-bienvenida></app-bienvenida>

Conclusión

En esta sección, hemos aprendido cómo crear componentes en Angular utilizando Angular CLI y manualmente. También hemos visto cómo registrar y utilizar componentes en una aplicación Angular. Los componentes son fundamentales para construir aplicaciones modulares y reutilizables en Angular. En la próxima sección, exploraremos las plantillas de componentes en mayor detalle.

Creación de Componentes

¿Qué es un Componente?

Estructura de un Componente

Creación de un Componente

2.1. Usando Angular CLI

2.2. Manualmente

Paso 1: Crear la Clase del Componente

Paso 2: Crear la Plantilla HTML

Paso 3: Crear los Estilos CSS

Paso 4: Registrar el Componente en un Módulo

Uso del Componente

Ejercicio Práctico

Ejercicio 1: Crear un Componente de Bienvenida

Solución

Conclusión

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas