Calling from Parent html button click to component function

0
votes

Component A html

In component A, i am loading app-command-packet-details i have a Primeng panel, on button click i am trying to call app-command-packet-details component function:

<p-overlayPanel #cp dynamic="true" [appendTo]="btnCp">
  <app-command-packet-details #commandPacket [id]="taskId"></app-command-packet-details>
</p-overlayPanel>

<p-button label="CP" (click)="commandPacket.getCommandPacket($event, pagedTasks, cp)" #btnCp></p-button>

that suppose to load html content into the Panel

Component command-packet-details.component.ts

@Component({
  selector: 'app-command-packet-details',
  templateUrl: './command-packet-details.component.html',
  styleUrls: ['./command-packet-details.component.css']
})

export class CommandPacketDetailsComponent implements OnInit {
  @Input() id: number;
  ...
  getCommandPacket(id: number) {
    this.renderSvc.getCommandPacket(id).subscribe(data => {
      this.commandPacket = data;
      this.commandKeys = Object.keys(this.commandPacket);
    });
  }
}

How can I load <app-command-packet-details component into the panel?

  • on other page, i am using <app-command-packet-details and it loads html data, and show it on page..
1
angulartypescript

1 Answers

0
votes

You can use @ViewChild to achieve this, 

@Component({
  selector: 'app-command-packet-details',
  templateUrl: './command-packet-details.component.html',
  styleUrls: ['./command-packet-details.component.css']
})

export class CommandPacketDetailsComponent implements OnInit {
  getCommandPacket(id: number) {
     // Logic
  }
}


@Component({
  selector: 'p-overlayPanel',
  template: `<app-command-packet-details></app-command-packet-details>
             <p-button label="CP" (click)="getCommandPacketParent($event, 1234)" #btnCp></p-button>

    `,
  directives: [CommandPacketDetailsComponent]
})

class POverlayPanel {
  @ViewChild(CommandPacketDetailsComponent) child: CommandPacketDetailsComponent;

  getCommandPacketParent(event:any, id:number){
     this.child.getCommandPacket(id);
   }
}

I hope this may help you, solve you problem.