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í