angular - ocultar componente hijo en un componente padre

Quiero renderizar un componente hijo en un padre solo cuando el hijo haya terminado una llamada HTTP, pero no funciona para mí, el componente hijo no se muestra...

child selector in parent component
<app-child-component *ngIf="alert" (alert)="propagar($evento)"></app-child-component >


export class ParentComponent implements OnInit {
    alert = false;

    propagar(evento: boolean) {
        this.alert = evento;
}

export class ChildComponent implements OnInit {
    @Output alert = new EventEmitter<boolean>();

    ngOnInit() {
        this.childComponentService.getSomething().subscribe(response => {
               if(this.response.code === 200) 
                      this.alerta.emit(true);//here I just want the child component to be displayed
        })
    }
}

Pero no funciona, el componente hijo nunca se muestra aunque el servicio responda correctamente

Respuesta #1

No puedes hacer eso de esta manera porque el componente se renderizará (es decir, se inicializará) solo una vez que la condición de *ngIf sea verdadera.

En su lugar, sugiero manejarlo completamente dentro de su componente hijo, mapeando el observable de la llamada HTTP a boolean una vez que la llamada HTTP haya terminado, para determinar si el contenido del componente debe renderizarse o no.

Puedes probar lo siguiente:

parent.component.html

<app-child-component></app-child-component>

child.component.ts

export class ChildComponent implements OnInit {
  ready$: Observable<boolean>;

  ngOnInit() {
    // Assign it to an observable to avoid handling subscribe/unsubscribe within the component class.
    ready$ = this.childComponentService
      .getSomething()
      .pipe(map((response) => response.code === 200));
  }
}

child.component.html

<!-- Wrap all your child component template with ng-container -->
<ng-container *ngIf="ready$ | async">
  <!-- Your child components stuff here which will be rendered only once the HTTP call is completed -->
</ng-container>

Respuesta #2

Estás usando directiva estructural en el componente hijo. Si se establece inicialmente en "false", ni siquiera se iniciará el componente hijo, por lo que no se ejecutará ninguna llamada HTTP en el hijo. Lo que puedes hacer es usar la propiedad "[hidden]" en lugar de "*ngIf" con el valor inicial establecido en true. De esta manera, cuando el componente hijo emita un evento de salida, la propiedad vinculada con "hidden" puede establecerse como false y el componente hijo se mostrará en el DOM.

child selector in parent component
<app-child-component [hidden]="alert" (alert)="propagar($evento)"></app-child-component >


export class ParentComponent implements OnInit {
    alert = true;

    propagar(evento: boolean) {
        this.alert = evento;
}

export class ChildComponent implements OnInit {
    @Output alert = new EventEmitter<boolean>();

    ngOnInit() {
        this.childComponentService.getSomething().subscribe(response => {
               if(response.code === 200) 
                      this.alert.emit(false);
        })
    }
}