Como funciona o ciclo de vida *ngDoCheck*?

Oi Gelson, tudo bem?

Desculpe a demora em retornar.

O ciclo de vida ngDoCheck é um dos mais importantes na estrutura do Angular. Ele é acionado toda vez que o Angular verifica se há mudanças em seu componente ou em seus filhos. É uma forma de detectar mudanças e realizar ações específicas, seja atualizando o componente ou recuperando informações de outros componentes.

Quando uma mudança ocorre em um componente ou em um filho, o Angular começa a verificar essas mudanças no ciclo de detecção de mudanças. Quando essa verificação é feita, o ciclo ngDoCheck é executado. Nesse ciclo, o Angular verifica se há mudanças nos valores dos dados, propriedades e variáveis do componente.

Se o Angular detectar mudanças, o ngDoCheck será chamado e você poderá executar uma ação específica. Por exemplo, se houver mudanças nos dados, você poderá atualizar o valor ou exibir uma mensagem ao usuário. Aqui está um exemplo de como o ngDoCheck funciona:

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

@Component({
  selector: 'app-example',
  template: `
    <div *ngFor="let item of items">{{ item }}</div>
    <button (click)="addItem()">Add Item</button>
  `
})
export class ExampleComponent implements DoCheck {
  items = ['Item 1', 'Item 2', 'Item 3'];
  lastItemsLength: number;

  ngDoCheck() {
    if (this.items.length !== this.lastItemsLength) {
      console.log('Items length has changed');
      this.lastItemsLength = this.items.length;
    }
  }

  addItem() {
    this.items.push(`Item ${this.items.length + 1}`);
  }
}

Neste exemplo, temos um componente com um array de itens e um botão que adiciona um novo item ao array. O método ngDoCheck verifica se o comprimento do array mudou, e se houver mudanças, exibe uma mensagem no console.

Além disso, o ciclo de vida ngDoCheck pode ser usado em conjunto com outros ciclos de vida, como ngOnInit e ngAfterViewInit. Aqui está um exemplo de como usar o ngDoCheck com o ngOnInit:

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

@Component({
  selector: 'app-example',
  template: `
    <div>{{ value }}</div>
    <button (click)="changeValue()">Change Value</button>
  `
})
export class ExampleComponent implements OnInit, DoCheck {
  value = 'Initial Value';
  lastValue: string;

  ngOnInit() {
    this.lastValue = this.value;
  }

  ngDoCheck() {
    if (this.value !== this.lastValue) {
      console.log('Value has changed');
      this.lastValue = this.value;
    }
  }

  changeValue() {
    this.value = 'New Value';
  }
}

Neste exemplo, temos um componente com uma variável de valor e um botão que altera o valor da variável. O ngOnInit é executado quando o componente é inicializado, e o ngDoCheck é executado sempre que há mudanças no valor da variável.

Espero que tenha te ajudado, bons estudos!