Angular 9: Sending data to parent component after destroying child component

Question

The child component cover the whole screen, so it has a funtion to destroy itself after clicking a button (Think of it like entering the child component to view details and then closing it after finishing).

The parent component creates the child (DetallePedidoComponent) with a component factory inside this function:

 createComponent(id) {
        this.entry.clear();
        const factory = this.resolver.resolveComponentFactory(DetallePedidoComponent);
        this.renderer.setStyle(this.pedidoscontainer.element.nativeElement, 'display', 'none');
        this.componentRef = this.entry.createComponent(factory);
        this.componentRef.instance.cPedido(id);
        this.componentRef.instance.componentRef = this.componentRef;
                        }

The child component has an EventEmitter and an OnDestroy function:

 export class DetallePedidoComponent implements OnInit, OnDestroy  {
        @Output() refrescar: EventEmitter<string> = new EventEmitter<string>();
        pedido;
        query: any = {};

        constructor(

            private pedidosService: PedidosService,
            private admService: AdmService,
            private loggedService: LoggedService,
            private dialog: MatDialog,
            private renderer: Renderer2) { }
)

 destroyComponent() {
        this.renderer.setStyle(this.pedidoscontainer.element.nativeElement, 'display', 'flex');
        this.componentRef.destroy();
    }

ngOnDestroy(){ 
         this.refrescar.emit('TEST');   
     }

Im emiting "TEST" from the child component. The parent has the "refrescar" event on a p-table (This table has an icon that fires the createcomponent function from the start of this post):

 <div class="cell">
             <span class="cart" >
            <p-table #dt [value]="pedidos"  [rows]="10" [paginator]="true"
              [pageLinks]="3" [responsive]="true"
              [columns]="cols" 
              [globalFilterFields]="cols" 
              (refrescar) = "log($event)"
                     <mat-icon inline=true class="icon-display"  (click)="createComponent(pedido.Id)"
 matTooltip="Ver">visibility</mat-icon>
                   </span>

                 </td>
                 <td><span >{{ pedido.Nro }}</span></td>
                 <td><span *ngIf="isInRole('CLIENTE') || isInRole('ADM') || isInRole('ADMVENTAS')">{{ pedido.DescripcionDrogueria }}</span></td>
                 <td  ><span> {{  pedido.User.RazonSocial }}</span></td>
                 <td><span>{{ pedido.Estado   }} </span></td>
                 <td><span> {{ pedido.FechaCreacion |  date: 'dd/MM/yyyy hh:mm:ss'}} </span></td>

               </tr>
             </ng-template>
             <ng-template pTemplate="emptymessage" let-columns>
               <tr>
                 <td [attr.colspan]="columns.length+1">
                   No se encontraron registros.
                 </td>
               </tr>
          </ng-template>
            </p-table>
           </span>
           </div>
         </div>

And the Log function looks like this:

Log(m: string){
        console.log (m)     
    }

My problem is that the parent component is not reacting to the child´s event (The Log function is recieving anything). Im new to this so i dont know what did i do wrong. Can someone help me reach the issue here?

Michael D Michael D · Accepted Answer · 2020-06-11T12:11:53

The refrescar event is bound to the DetallePedidoComponent component. You either need to bind to it in the template if you invoke the component using the selector or in your case you need to subscribe to it. Try the following

createComponent(id) {
  ...

  this.componentRef.instance.refrescar.subscribe(log => this.log(log));
}

Angular 9: Sending data to parent component after destroying child component

1 Answers