Angular Academy · Aula

ngOnInit e inicialização

Execute a lógica de configuração quando um componente começar.

ngOnInit e inicialização é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

O que são ganchos do ciclo de vida?

Os componentes do Angular têm um ciclo de vida gerenciado pelo framework: criação, detecção de alterações, renderização e destruição. Os ganchos do ciclo de vida permitem executar código em momentos específicos.

Conhecendo OnInit

O gancho OnInit é executado uma vez, depois que o Angular define as entradas do componente e renderiza a visualização inicial. Esse é o local padrão para a lógica de inicialização.

Implementando OnInit

Implemente a interface OnInit e adicione o método ngOnInit. O Angular o chama automaticamente.

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

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    console.log("Component initialized");
  }
}

Constructor versus ngOnInit

O construtor é executado primeiro, antes que as entradas sejam definidas, e deve apenas realizar uma injeção de dependências simples. Use ngOnInit para a configuração propriamente dita, quando as entradas já estiverem disponíveis.

constructor(private http: HttpClient) {
  // inputs NOT ready yet
}

ngOnInit() {
  // inputs ARE ready here
}

As entradas estão prontas em ngOnInit

Quando ngOnInit é executado, todas as propriedades @Input já têm seus valores iniciais vinculados pelo componente pai.

@Input() userId!: string;

ngOnInit() {
  console.log(this.userId); // available
}

Buscando dados em ngOnInit

Um padrão comum é carregar dados de um serviço em ngOnInit, pois as entradas e as dependências já estão disponíveis.

ngOnInit() {
  this.userService.getUser(this.userId)
    .subscribe(u => this.user = u);
}

ngOnInit é executado uma vez

Ao contrário dos ganchos de detecção de alterações, ngOnInit é executado exatamente uma vez durante o ciclo de vida do componente, logo depois do primeiro ngOnChanges.

Ordem em relação a ngOnChanges

Se o componente tiver entradas, ngOnChanges é executado primeiro com os valores iniciais e, em seguida, ngOnInit é executado. Sem entradas, ngOnInit ainda é executado.

// sequence with inputs:
// 1. constructor
// 2. ngOnChanges (first)
// 3. ngOnInit

Inicializando formulários

Criar formulários reativos é uma tarefa clássica de ngOnInit, pois talvez você precise de serviços injetados para configurar o formulário.

form!: FormGroup;

ngOnInit() {
  this.form = this.fb.group({
    name: [""],
    email: [""]
  });
}

Mantenha os construtores leves

Evite realizar tarefas pesadas no construtor. Ele é executado antes que o Angular conecte as entradas, e os efeitos colaterais nesse local tornam os componentes mais difíceis de testar e prever.

Inicialização assíncrona

Você pode chamar uma lógica assíncrona de ngOnInit, mas o próprio método retorna void; inscreva-se ou use padrões assíncronos dentro dele.

ngOnInit() {
  this.loadAsync();
}

private async loadAsync() {
  this.data = await firstValueFrom(this.api.get());
}

Verificação rápida

Teste sua compreensão sobre OnInit.

Recapitulação

O gancho OnInit com ngOnInit é executado uma vez depois que as entradas são vinculadas e é ideal para buscar dados e configurar formulários. Mantenha o construtor leve e deixe a inicialização para ngOnInit.

Perguntas Frequentes

A aula “ngOnInit e inicialização” é grátis?

Sim — o texto completo de “ngOnInit e inicialização” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “ngOnInit e inicialização”?

Execute a lógica de configuração quando um componente começar. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “ngOnInit e inicialização”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy