Ciclo de Vida de Componentes en Angular: Eventos Clave

Clase 37 de 71 • Curso de Angular: Creación de Aplicaciones Web

Resumen

¿Qué es ngOnInit y por qué es tan importante?

El evento ngOnInit es uno de los ciclos de vida más esenciales en el desarrollo de aplicaciones con Angular. A menudo se confunde con el constructor, pero tiene un propósito diferente y es crucial comprender sus capacidades.

Uso único: Mientras que un constructor puede ejecutarse varias veces antes y después del renderizado, ngOnInit se ejecuta solo una vez, inmediatamente después del renderizado inicial del componente. Esto hace que sea el lugar ideal para tareas de inicialización del componente.
Tareas asíncronas: Este evento es perfecto para manejar operaciones asíncronas como llamadas a una API o suscripciones a observables, ya que garantiza que el componente ya ha sido completamente renderizado.

Para ilustrar su uso, si se desea obtener una lista de productos desde una fuente de datos, ngOnInit es el momento adecuado para hacer un fetch y manipular la respuesta para actualizar el componente.

¿Cómo funciona ngAfterViewInit?

ngAfterViewInit es otro ciclo de vida que se desencadena después de ngOnInit y tiene una función específica.

Renderizado de componentes hijos: Este evento es clave para determinar cuándo los componentes hijos de un componente principal han sido completamente renderizados. Es útil si necesitas interactuar con los elementos del DOM de esos componentes hijos.

Al declarar un componente dentro de otro, ngAfterViewInit te informará cuando dichos componentes hijos estén listos. Esto es esencial en aplicaciones que usan arquitecturas complejas o jerárquicas.

¿Cuándo se utiliza ngOnDestroy?

Por último, ngOnDestroy es el evento que se ejecuta cuando un componente está a punto de ser destruido.

Limpieza y desuscripción: Se utiliza normalmente para liberar recursos, cancelar suscripciones y evitar fugas de memoria cuando el componente ya no se requiere.

Para destruir un componente, se puede usar una directiva como ngIf, que al no cumplirse una condición, removerá el componente y, en consecuencia, disparará ngOnDestroy.

Por ejemplo, si tienes un componente cuya visibilidad depende de un valor como duration, al volverse negativo, ngOnDestroy se ejecutará y eliminará el componente. Si posteriormente el valor cambia a un estado positivo, todo el ciclo de vida del componente se reinicia, comenzando desde el constructor.

Estos ciclos de vida son fundamentales para el rendimiento y el manejo eficiente de los recursos en aplicaciones Angular. Conocerlos te permitirá escribir código más robusto y optimizado. ¡Sigue explorando las posibilidades de Angular y continúa aprendiendo!

Francisco Javier Cervantes Candelario

student•

Por alguna razón, me marcaba este error al escribir la directiva de *ngIf

If the 'ngIf' is an Angular control flow directive, please make sure that either the 'NgIf'

Basta con agregar un import de CommonModule en archivos de about.component.ts y counter.component.ts, asi:

import { CommonModule } from '@angular/common';

y agregarlo en los imports

@Component({
  ...
  imports: [CommonModule],
  ...
})

Manuel Alberto Goicochea Medina

student•

gracias e.e

Emmanuel Hernández Valero

student•

podrías haber usado

@if(duration() > 0 ){
  <p>
    <app-counter></app-counter>
  </p>
}

Brandon Lee Aguero Fernandez

student•

En el Curso de Angular: Componentes y Servicios en esta clase a partir del minuto 4:09. El profesor explica que ngOnInit es before render pero en la clase actual se menciona que es after render. ¿Cuál sería la explicación correcta?

Platzi

student•

La explicación correcta es que ngOnInit se ejecuta antes del render del componente.

César Augusto Cortés Labrada

student•

Para saber cuando se activa el onInit, en el counter tomé un elemento como referencia y en .ts cree una propiedad que guarda dicho elemento. Luego extraje el contenido de esa etiqueta en el onInit y me dio como resultado undefined; quiere decir que no encontró al elemento por tanto su contenido no existe y da undefined, oséa que, onInit se activa antes del render. En cambio, cuando hago lo mismo en el afterInit si encuentra el contenido de la etiqueta , oséa, después del render.

counter.html
//Esto es una pieza solamente del .ts
<div>
  <p>Counter</p>
  <span #text_test>Soy ref de prueba</span> <!-- Referencia con #text_test -->
</div>

counter.ts
@ViewChild('text_test') textTest!: ElementRef<HTMLElement>
  ngOnInit(): void {
    console.log('Init');
    console.log("ELEMENTO", this.textTest.nativeElement.textContent); //Da error undefined
    console.log('-'.repeat(10));
  }

  ngAfterViewInit(): void {
    console.log('Afterview');
    console.log("After", this.textTest.nativeElement.textContent);//Obtenemos el contenido
    console.log('-'.repeat(10));
  }
```Por último recordar comentar la línea del onInit donde se espera obtener el contenido de la etiqueta p para poder probar el afterInit

César Augusto Cortés Labrada

student•

este comentario: //Esto es una pieza solamente del .ts va después del html del bloque

César Augusto Cortés Labrada

student•

corrección, no usé una etiqueta sino una etiqueta como referencia

Julian Franco

student•

Pero osea que si tengo un formulario, y suso el

this.formulario.valueChanges.subscribe()

En donde se deberia poner ?

Emmanuel Rodríguez

student•

Hola 👋 . Para suscribirte a los cambios en los valores de un formulario, el mejor lugar para hacerlo es dentro del método ngOnInit(). Este es el momento en el ciclo de vida del componente donde se ha inicializado, pero aún no se ha mostrado la vista, lo que te da un lugar ideal para configurar tus observables.

export class MiFormularioComponent implements OnInit {
  formulario: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.formulario = this.fb.group({
      // Definiciones de tus controles de formulario aquí
      nombre: [''],
      email: ['']
    });

    this.formulario.valueChanges.subscribe(values => {
      console.log(values);
      // Lógica adicional aquí
    });
  }
}

Al suscribirte en ngOnInit(), aseguras que el formulario esté completamente inicializado y listo para ser utilizado. . Además, es crucial desuscribirse de cualquier observador cuando el componente se destruya para evitar fugas de memoria. Esto lo puedes hacer implementando el ciclo de vida ngOnDestroy() junto con una propiedad para almacenar la suscripción:

export class MiFormularioComponent implements OnInit, OnDestroy {
  // Otro código

  ngOnDestroy() {
    if (this.formSubscription) {
      this.formSubscription.unsubscribe();
    }
  }
}

Implementar ngOnDestroy() y cancelar la suscripción de esta manera asegura que el componente limpie adecuadamente los recursos que ya no necesita, previniendo problemas de rendimiento.

Reinaldo Mendoza

student•

Esto se vuelve mas divertido cuando el proyecto en el que trabajas tiene librerías externas y tienes que interactuar con ellas

ANDRES ALFONSO MIRA MEJIA

student•

✅

Max Andy Diaz Neyra

student•

Codigo de la clase:

<p>
  <input type="number" [value]="duration()" (change)="changeDuration($event)">
</p>
<p>
  <input type="text" [value]="message()" (change)="changeMesage($event)">
</p>
<p>
  @if(duration()> 0){
    <app-counter [duration]="duration()" [message]="message()"></app-counter>
  }
</p>


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

@Component({
  selector: 'app-counter',
  standalone: true,
  imports: [],
  templateUrl: './counter.component.html',
  styleUrl: './counter.component.css',
})
export class CounterComponent {
  @Input({ required: true }) duration = 0;
  @Input({ required: true }) message = '';

  constructor() {
    // NO ASYNC
    // before render
    console.log('nuestro constructor');
    console.log('-'.repeat(10));
  }

  ngOnChanges(changes: SimpleChanges) {
    // before and during render
    console.log('ngOnChanges');
    console.log('-'.repeat(10));
    console.log(changes);
  }

  ngOnInit() {
    // una vez
    // async, then, subs
    console.log('ngOnInit');
    console.log('-'.repeat(10));
    console.log('duration =>', this.duration);
    console.log('message =>', this.message);
    console.log('-'.repeat(10));
  }

  ngAfterViewInit() {
    // despues de pintar el componente padre e hijos
    console.log('ngAfterViewInit');
    console.log('-'.repeat(10));
  }

  ngOnDestroy() {
    console.log('ngOnDestroy');
    console.log('-'.repeat(10));
  }
}

Jhonattan Halcon Casallas Felipe

student•

Quitandole la etiqueta en el componente, no me presenta problema al renderizar el HTML, al dejarlo, me presenta problemas con la Hidratación en el DOM. :