El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Introducción

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

Objetivos

Comprender la estructura básica de un componente Angular.
Aprender a generar componentes utilizando Angular CLI.
Conocer las propiedades y métodos básicos de un componente.
Entender cómo integrar componentes en una aplicación Angular.

Estructura de un Componente Angular

Un componente en Angular se compone de cuatro partes principales:

Decorador @Component: Define el componente y sus metadatos.
Clase del Componente: Contiene la lógica y los datos del componente.
Plantilla HTML: Define la estructura visual del componente.
Estilos CSS: Aplica estilos específicos al componente.

Ejemplo Básico de un Componente

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

@Component({
  selector: 'app-ejemplo',
  template: `
    <h1>{{ titulo }}</h1>
    <p>{{ descripcion }}</p>
  `,
  styles: [`
    h1 {
      color: blue;
    }
  `]
})
export class EjemploComponent {
  titulo: string = 'Hola, Angular!';
  descripcion: string = 'Este es un componente de ejemplo.';
}

Explicación del Código

Importación: Importamos el decorador @Component desde el paquete @angular/core.
Decorador @Component:
- selector: Define el nombre del componente que se utilizará en las plantillas HTML.
- template: Define la estructura HTML del componente.
- styles: Define los estilos CSS específicos para el componente.
Clase del Componente:
- titulo y descripcion: Son propiedades de la clase que se utilizan en la plantilla HTML.

Generar un Componente con Angular CLI

Angular CLI proporciona una forma rápida y sencilla de generar componentes. Utiliza el siguiente comando para crear un nuevo componente:

ng generate component nombre-del-componente

Por ejemplo, para crear un componente llamado usuario, ejecuta:

ng generate component usuario

Este comando generará los siguientes archivos:

usuario.component.ts: Contiene la clase del componente y el decorador @Component.
usuario.component.html: Contiene la plantilla HTML del componente.
usuario.component.css: Contiene los estilos CSS del componente.
usuario.component.spec.ts: Contiene las pruebas unitarias del componente.

Integrar Componentes en una Aplicación Angular

Para utilizar un componente en una aplicación Angular, sigue estos pasos:

Declarar el Componente: Asegúrate de que el componente esté declarado en el módulo correspondiente (generalmente app.module.ts).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UsuarioComponent } from './usuario/usuario.component';

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

Utilizar el Selector del Componente: Inserta el selector del componente en la plantilla HTML donde desees que aparezca.

<!-- app.component.html -->
<app-usuario></app-usuario>

Ejercicio Práctico

Ejercicio 1: Crear un Componente de Producto

Genera un nuevo componente llamado producto utilizando Angular CLI.
Modifica la clase del componente para que tenga las siguientes propiedades:
- nombre: string
- precio: number
Actualiza la plantilla HTML del componente para mostrar el nombre y el precio del producto.
Declara el componente en el módulo principal (app.module.ts).
Utiliza el selector del componente en la plantilla principal (app.component.html).

Solución

Generar el componente:

ng generate component producto

Modificar la clase del componente:

// producto.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-producto',
  templateUrl: './producto.component.html',
  styleUrls: ['./producto.component.css']
})
export class ProductoComponent {
  nombre: string = 'Laptop';
  precio: number = 1200;
}

Actualizar la plantilla HTML:

<!-- producto.component.html -->
<h2>{{ nombre }}</h2>
<p>Precio: {{ precio | currency }}</p>

Declarar el componente en el módulo principal:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProductoComponent } from './producto/producto.component';

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

Utilizar el selector del componente:

<!-- app.component.html -->
<app-producto></app-producto>

Conclusión

En esta lección, hemos aprendido cómo crear y utilizar componentes en Angular. Los componentes son esenciales para construir aplicaciones modulares y reutilizables. En la próxima lección, exploraremos las plantillas de componentes en mayor detalle.

¡Continúa practicando y experimentando con componentes para dominar su uso en Angular!

Creación de Componentes

Introducción

Objetivos

Estructura de un Componente Angular

Ejemplo Básico de un Componente

Explicación del Código

Generar un Componente con Angular CLI

Integrar Componentes en una Aplicación Angular

Ejercicio Práctico

Ejercicio 1: Crear un Componente de Producto

Solución

Conclusión

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

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

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas