Aprende a implementar y gestionar componentes en Angular 18. Guía detallada para ingenieros de software con ejemplos prácticos y recomendaciones actuales.

Angular 18: componentes y su implementación efectiva

Introducción a los componentes en Angular 18

En Angular 18, los componentes son la base fundamental para construir interfaces de usuario. Cada componente en Angular encapsula una pieza de la interfaz y su lógica asociada, lo que permite una mayor modularidad y reutilización del código.

Creación de un componente básico

Para crear un componente en Angular 18, utilizamos el CLI de Angular. Ejecuta el siguiente comando en tu terminal:

ng generate component nombre-del-componente

Este comando generará los archivos necesarios para tu componente: .ts, .html, .css y .spec.ts.

Estructura de un componente

Un componente en Angular 18 está compuesto por cuatro archivos principales:

1. nombre-del-componente.component.ts: Contiene la lógica del componente.
2. nombre-del-componente.component.html: Define la plantilla HTML.
3. nombre-del-componente.component.css: Incluye los estilos específicos del componente.
4. nombre-del-componente.component.spec.ts: Contiene las pruebas unitarias.

Ejemplo de un componente básico

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

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

  constructor() { }
}

En este ejemplo, el componente incluye una propiedad titulo que se puede utilizar en la plantilla HTML.

Comunicación entre componentes

La comunicación entre componentes en Angular 18 se realiza mediante @Input y @Output.

Uso de @Input

La anotación @Input permite que un componente hijo reciba datos de su componente padre.

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

@Component({
  selector: 'app-componente-hijo',
  template: '<p>{{ mensaje }}</p>'
})
export class ComponenteHijoComponent {
  @Input() mensaje: string;
}

Uso de @Output

La anotación @Output permite que un componente hijo emita eventos hacia su componente padre.

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-componente-hijo',
  template: '<button (click)="enviarMensaje()">Enviar Mensaje</button>'
})
export class ComponenteHijoComponent {
  @Output() mensajeEvento = new EventEmitter<string>();

  enviarMensaje() {
    this.mensajeEvento.emit('Mensaje desde el componente hijo');
  }
}

Ciclo de vida de un componente

Angular 18 proporciona varios hooks de ciclo de vida que permiten ejecutar lógica en diferentes fases del ciclo de vida de un componente.

Ejemplo de hooks de ciclo de vida

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-nombre-del-componente',
  templateUrl: './nombre-del-componente.component.html',
  styleUrls: ['./nombre-del-componente.component.css']
})
export class NombreDelComponenteComponent implements OnInit, OnDestroy {

  ngOnInit() {
    console.log('Componente inicializado');
  }

  ngOnDestroy() {
    console.log('Componente destruido');
  }
}