Esperar o componente filho carregar os dados

Olá, Tudo ok?

Uma forma de resolver essa situação é utilizando o conceito de "observables" do Angular. Você pode criar um observable no serviço que será responsável por emitir um evento quando os dados estiverem prontos. No componente filho, você pode se inscrever nesse observable e aguardar a emissão desse evento antes de prosseguir.

Vou te dar um exemplo prático de como fazer isso:

No serviço, você pode criar um observable utilizando a classe Subject do pacote rxjs. Veja como ficaria:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MeuServico {
  private dadosProntos = new Subject<boolean>();

  getDadosProntos() {
    return this.dadosProntos.asObservable();
  }

  carregarDados() {
    // Lógica para carregar os dados aqui

    // Após carregar os dados, emita um evento para indicar que eles estão prontos
    this.dadosProntos.next(true);
  }
}

No componente filho, você pode se inscrever no observable e aguardar a emissão do evento antes de prosseguir. Veja como ficaria:

import { Component, OnInit } from '@angular/core';
import { MeuServico } from 'caminho/para/o/servico';

@Component({
  selector: 'app-componente-filho',
  templateUrl: './componente-filho.component.html',
  styleUrls: ['./componente-filho.component.css']
})
export class ComponenteFilhoComponent implements OnInit {

  constructor(private meuServico: MeuServico) { }

  ngOnInit() {
    this.meuServico.getDadosProntos().subscribe(dadosProntos => {
      if (dadosProntos) {
        // Os dados estão prontos, você pode prosseguir com a renderização do componente
      }
    });
  }

}

Dessa forma, o componente pai só será renderizado quando o componente filho emitir o evento indicando que os dados estão prontos.

Em suma, seria isso, tá?!

Se precisar eu estarei por aqui!

Abraços e bons estudos.

Espero ter ajudado! Bons estudos!

Não entendi, isso é o que eu já faço normalmente. No componente filho eu estou pegando uma lista de dados de uma API, esse componente é renderizado dentro de outro componente maior. O componente pai tem seu estado de loading que eu controlo com um boolean, mas quando ele termina de carregar geralmente o filho ainda está carregando pois tem uma carga maior de dados pra pegar da API. Eu poderia fazer a mesma coisa pro componente filho, mas o usuário entraria na página e o pai carregaria, depois ainda apareceria o filho renderizando com o skeleton de loading até ele carregar, mas acho estranho. Além disso, é um formulário. Qual é a solução convencional pra isso?

Olá novamente!

Entendi melhor a sua situação. Se você já está utilizando observables para controlar o estado de loading e o componente pai só renderiza quando o filho está pronto, mas ainda enfrenta problemas porque o filho está carregando uma quantidade considerável de dados da API, especialmente em um formulário, podemos considerar algumas abordagens.

1. Paginação ou Lazy Loading:

   • Considere implementar a paginação ou o carregamento preguiçoso (lazy loading) para os dados do componente filho. Dessa forma, o componente filho poderia carregar uma quantidade menor de dados inicialmente, exibindo apenas o necessário para a página ser funcional. Conforme o usuário interage ou rola a página, você pode carregar mais dados de maneira assíncrona.

2. Mensagens de Carregamento:

   • Implemente mensagens de carregamento para informar ao usuário que o componente filho está carregando dados adicionais. Isso pode incluir um indicador visual de loading (um spinner, por exemplo) e uma mensagem indicativa.

3. Otimização de Desempenho:

   • Considere otimizações no lado do servidor para melhorar a velocidade de carregamento dos dados da API. Isso pode incluir o uso de caches, compressão de dados ou otimizações na consulta à API.

4. Feedback Incremental:

   • Permita que o usuário veja e interaja com partes do formulário que já foram carregadas, mesmo que o restante esteja em processo. Isso proporciona uma experiência mais progressiva e evita que o usuário espere por todo o carregamento.

5. Otimizações de Angular:

   • Verifique se há oportunidades de otimização no próprio código Angular, como estratégias de detecção de mudanças ou o uso eficiente dos ciclos de vida dos componentes.

Essas são sugestões que podem ser adaptadas conforme a complexidade e os requisitos específicos do seu projeto. Lembre-se de que o objetivo é proporcionar uma experiência de usuário fluída, mesmo quando lidando com grandes volumes de dados.

Espero que essas sugestões sejam úteis para a sua situação.

Se precisar de mais esclarecimentos ou tiver outras perguntas, estou à disposição!

Abraços e bons estudos!