Skip to main content
1 de 2
Legna
  • 6.6k
  • 4
  • 20
  • 48

Puedes crear un getter y un setter para detectar cuando las operaciones esten terminadas:

_datosCargados = 0;
  set datosCargados(value: number) {
    this._datosCargados = value;
    console.log(value);
    //Si nuestro contador llega a tres, signifca que las 3 operaciones
    // que definimos terminaron su carga.
    if (this._datosCargados === 3) this.crearFormulario();
  }

  get datosCargados() {
    return this._datosCargados;
  }
  
  //Creamos una cache de los datos para acceder a ellos posteriormente. 
  departamentos = [];
  provincias = [];
  distritos = [];

  constructor(private ubigeoService: UbigeoService) {}
  
  //Ejecutamos todo cuando el componente este listo. 
  ngOnInit(): void {
    this.ubigeoService.listarDepartamento().subscribe((x) => {
      this.departamentos = x;
      this.datosCargados++;
      this.carga('departamentos');
    });
    this.ubigeoService.listaProvincias({}).subscribe((x) => {
      this.provincias = x;
      this.datosCargados++;
      this.carga('provincias');
    });
    this.ubigeoService.listaDistritos(null, null).subscribe((x) => {
      this.distritos = x;
      this.datosCargados++;
      this.carga('distritos');
    });
  }

  leyenda = '....Cargando departamentos, provincias, distritos';
  carga = (texto) => (this.leyenda = this.leyenda.replace(texto, ''));
  crearFormulario() {
    this.leyenda = 'Se muestra el formulario';
  }

La carga podría ser a solicitud (al desplegar cada una de las opciones ), pero en lo personal prefiero cargar todos los datos, siempre y cuando no representen un problema por el tamaño.

Te dejo un ejemplo funcional aquí

Legna
  • 6.6k
  • 4
  • 20
  • 48