Alguém poderia me explicar como funciona e exemplos de aplicação desse ciclo de vida?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Alguém poderia me explicar como funciona e exemplos de aplicação desse ciclo de vida?
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!