Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación

¿Cómo montar un componente en una página de Angular?

Para trabajar adecuadamente con componentes en Angular, es necesario seguir ciertos pasos para montar y configurar cada parte. A continuación, ilustramos con un ejemplo cómo un componente se puede utilizar en nuestra aplicación mediante el proceso de importación y configuración en una página.

Paso 1: Crear el HTML base

Inicialmente, es importante estructurar el HTML de la página donde se desea montar el componente. Aquí se crean algunos párrafos para dar estructura y separar elementos de forma visual:

<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p>

Paso 2: Montar el componente

Una vez listos los elementos básicos, procedemos a integrar el componente deseado. Utilizando el selector del componente, podemos añadirlo directamente al HTML:

<app-counter></app-counter>

Paso 3: Importar el componente

Es vital asegurarse de que el componente está correctamente importado. En Angular, un componente debe conocerse en el contexto del otro. Se realiza mediante la importación del componente en el módulo que lo utilizará.

import { CounterComponent } from 'shared/components/counter.component';

Añádelo al array imports de tu módulo:

@NgModule({
  imports: [
    CounterComponent
  ],
  ...
})

¿Cómo utilizar señales para manejar cambios dinámicos?

El uso de señales o "signals" es crucial para manejar datos dinámicos y monitorear cambios en la aplicación de forma reactiva.

Paso 1: Crear señales

Primero, se inicializan las señales necesarias para las variables críticas como duration y message.

const durationSignal = signal(1000);
const messageSignal = signal('Mensaje por defecto');

Paso 2: Manipular señales con eventos

Con las señales creadas, se implementan métodos para modificar estas señales utilizando eventos, comúnmente a través de inputs HTML.

function changeDuration(event: Event) {
  const inputElement = event.target as HTMLInputElement;
  durationSignal.set(Number(inputElement.value));
}

function changeMessage(event: Event) {
  const inputElement = event.target as HTMLInputElement;
  messageSignal.set(inputElement.value);
}

Paso 3: Crear inputs interactivos

Estos inputs conectan con las señales y permiten al usuario interactuar y modificar valores:

<input type="number" [value]="durationSignal" (input)="changeDuration($event)">
<input type="text" [value]="messageSignal" (input)="changeMessage($event)">

¿Cómo visualizar y depurar componentes en Angular?

Una vez configurado todo, visualiza tu componente y sus interacciones en la práctica.

Paso 1: Configurar página de demostración

Si la página about es aquella donde se visualiza el componente app-counter, asegúrate de renderizar adecuadamente la nueva página:

// En el módulo del router
const routes: Routes = [
  { path: 'about', component: AboutComponent },
  ...
];

Paso 2: Explorar resultados en el navegador

Luego de configurar correctamente la página y componentes, observa la interacción desde el navegador. Usa herramientas como el DevTools para depurar cada evento en el ciclo de vida:

1. Al iniciar, el constructor del componente se ejecuta primero.
2. El evento ngOnChanges se activa cada vez que una propiedad de entrada cambia.
3. La consola muestra cambios específicos y su historial, como valores anteriores y actuales.

Una implementación cuidadosa de estos pasos permite una experiencia rica e interactiva en aplicaciones de Angular, facilitando futuros desarrollos y mejoras de componentes. ¡Continúa explorando y perfeccionando tus habilidades con Angular!