Constructor e ngOnInit em Angular: Entendendo as Diferenças

Neste artigo você aprenderá as diferenças de Constructor e ngOnInit, recursos presentes no framework Angular

Fala programador(a), beleza? Bora aprender mais sobre Angular!

No mundo do Angular, uma das bibliotecas de frontend mais populares, é comum encontrarmos conceitos que podem ser um pouco confusos para os iniciantes.

Entre eles, está a diferença entre o constructor e o ngOnInit.

Ambos desempenham papéis cruciais no ciclo de vida de um componente, mas têm propósitos e usos diferentes.

Neste artigo, vamos explorar as diferenças entre constructor e ngOnInit e entender quando e como usar cada um deles.

O Básico do Constructor

O que é o Constructor?

O constructor é um conceito padrão do TypeScript (e do JavaScript ES6), a linguagem em que o Angular é escrito.

É uma função especial que é chamada quando uma instância da classe é criada.

Como funciona no Angular?

No Angular, o constructor é geralmente utilizado para a injeção de dependências.

Não é recomendado usar o constructor para colocar lógica de inicialização do componente.

import { MeuServico } from './meu-servico';

export class MeuComponente {
  constructor(private meuServico: MeuServico) {}
}

O Poder do ngOnInit

O que é o ngOnInit?

ngOnInit é um método de ciclo de vida específico do Angular. Ele é chamado após a inicialização do componente, o que significa que é chamado após a construção do componente e depois que as propriedades de entrada são configuradas.

Como funciona no Angular?

Normalmente, usamos ngOnInit para colocar lógica de inicialização, como chamadas de API ou configuração inicial de variáveis.

É aqui que garantimos que todas as propriedades de entrada do componente estão disponíveis.

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

@Component({
  selector: 'app-meu-componente',
  templateUrl: './meu-componente.component.html'
})
export class MeuComponente implements OnInit {
  minhaVariavel: string;

  ngOnInit() {
    this.minhaVariavel = 'Olá, Mundo!';
  }
}

Diferenças-chave entre Constructor e ngOnInit

• Origem e Uso: constructor é um recurso padrão do TypeScript, enquanto ngOnInit é específico do Angular. Utilizamos o constructor principalmente para injeção de dependências e o ngOnInit para lógica de inicialização.
• Ordem de Execução: O constructor é sempre chamado antes do ngOnInit. No constructor, as propriedades de entrada do componente ainda não estão disponíveis, enquanto no ngOnInit, elas já estão definidas.
• Injeção de Dependência: No Angular, a injeção de dependência é geralmente realizada no constructor, e não no ngOnInit.
• Lógica de Inicialização: Qualquer lógica de inicialização, como chamadas de API ou configuração de variáveis, deve ser colocada no ngOnInit e não no constructor.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Tanto o constructor quanto o ngOnInit desempenham papéis cruciais na criação e inicialização de componentes no Angular.

No entanto, entender as diferenças entre eles e seus propósitos específicos é essencial para escrever código Angular limpo e eficiente.

Ao trabalhar com Angular, sempre lembre-se de usar o constructor para injeção de dependências e o ngOnInit para lógica de inicialização.

Dessa forma, você garante que seus componentes sejam criados e inicializados de forma adequada e eficaz.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.