This snippet is used for one parent component with html and render different child component in html, could run different function body based on which child component being rendered

Child Component

@Component({
  selector: 'app-school-year-change',
  templateUrl: './school-year-change.component.html',
  styleUrls: ['./school-year-change.component.scss']
})
export class SchoolYearChangeComponent extends WorktrayComponentBase implements OnInit {

  private _footerButtons: FooterButton[];

  constructor(private ref: DynamicDialogRef) {
    super();
  }

  ngOnInit() {

  }

  get footerButtons(): FooterButton[] {
    if (this._footerButtons != null) { return this._footerButtons; }
    const result: FooterButton[] = [];
    result.push({
      buttonName: 'Completed',
      buttonText: 'Completed',
      buttonClass: 'btn btn-lg btn-success ml-2 btn-lg justify-right',
      buttonAction: "Completed"
    });

    result.push({
      buttonName: 'In Review',
      buttonText: 'In Review',
      buttonClass: 'btn btn-lg btn-success ml-2 btn-lg justify-right',
      buttonAction: "InReview"
    });

    this._footerButtons = result;
    return result;
  }

  isBtnVisible(btnName: string): boolean {
    return true;
  }

  isBtnDisabled(btnName: string): boolean {
    return false;
  }

  doAction(action: string) {
    if(action == "Completed"){
      console.info("sadasda");
    }
  }

  onClose() {
    this.ref.close();
  }
}

interface and base component

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: '[worktray-host]',
})
export class WorktrayDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

export interface IWorktrayComponent {
  dialogRef: DynamicDialogRef;
  readonly footerButtons: FooterButton[];
  readonly cardHeadText: string;
  initialWorktrayData(worktrayItem: WorkTrayItem, invoiceNumber: string);
  onClose();
  doAction(action: string);
  isBtnDisabled(btnName: string);
  isBtnVisible(btnName: string);
  showProcessMessage(): string;
}

export class WorktrayComponentBase implements IWorktrayComponent {
  static dialogStyle = { 'min-width': '50%' };
  public dialogRef: DynamicDialogRef;
  public invoiceNumber: string;
  public worktrayItem: WorkTrayItem;
  // tslint:disable-next-line: variable-name
  get footerButtons(): FooterButton[] { return []; }
  initialWorktrayData(worktrayItem: WorkTrayItem, invoiceNumber: string) { this.invoiceNumber = invoiceNumber; this.worktrayItem = worktrayItem }
  onClose() { }
  doAction(action: string) { }
  get cardHeadText(): string {
    return '';
  }
  isBtnDisabled(btnName: string) { return false; }
  isBtnVisible(btnName: string) { return false; }
  showProcessMessage(): string { return "" };
  //#region accessibility
  /* For accessibility, keyboard only design, use tab to show borders but showing no border by clicking on mouse */
  keyboardFocus(event): void {
    event.style.outline = '1px solid black';
  }
  keyboardBlur(event): void {
    event.style.outline = '';
  }
  keyboardFocusEvent(event): void {
    event.target.style.outline = '1px solid black';
  }
  keyboardBlurEvent(event): void {
    event.target.style.outline = '';
  }
  //#endregion accessibility
}

Parent component

@Component({
  selector: 'app-worktray-popup',
  templateUrl: './worktray-popup.component.html',
  styleUrls: ['./worktray-popup.component.scss']
})
export class WorktrayPopupComponent implements AfterViewInit {
  @ViewChild(WorktrayDirective, {static: true}) raiserHost: WorktrayDirective;
  @ViewChild(InvoiceListComponent, {static: true}) invoiceListValue;
  worktrayItem: WorkTrayItem;
  resizeClassName: string;
  cardHeadText: string;
  worktrayComponentLoaded = false;
  worktrayComponent: IWorktrayComponent = null;
  invoiceNumber: string;

  constructor(
    private dialogRef: DynamicDialogRef,
    private config: DynamicDialogConfig,
    private componentFactoryResolver: ComponentFactoryResolver,
    private shellSharedService: ShellSharedService
  ) {
    this.worktrayItem = config.data.workTrayItem;
    this.resizeClassName = config.data.resizeClassName;
    this.cardHeadText = this.worktrayItem ? this.worktrayItem.Name : '';
  }
  ngAfterViewInit(): void {
    setTimeout(() => this.loadWorktrayComponent(), 30);
  }

  get showProcessMessage(): string{
    if (this.worktrayComponent) {
      return this.worktrayComponent.showProcessMessage();
    }
    return '';
  }

  redirectToBalance(event): void{
    event.preventDefault();
    event.stopPropagation();
    window.open(`#/home/balance/overview/${this.worktrayItem.StudentNumber}/${this.worktrayItem.ServiceRequest.ApplicationNumber}/account-transactions`, "_blank");
  }

  receiveInvoiceNumber($event): void{
    this.invoiceNumber = $event;
  }

  onClose() {
    this.worktrayComponent.onClose();
  }
  private loadWorktrayComponent() {
    switch (this.worktrayItem.Name) {
      case PROCESS_NAMES.IEC_DURATION_CHANGE: this._loadWorktrayComponent(IecDurationChangeComponent); break;
      case PROCESS_NAMES.SCHOOL_YEAR_CHANGE_TUITION: this._loadWorktrayComponent(SchoolYearChangeComponent); break;
      case PROCESS_NAMES.IEC_SCHOOL_TRANSFER: this._loadWorktrayComponent(IecSchoolTransferComponent); break;
      case PROCESS_NAMES.Pnh_Option3:
      case PROCESS_NAMES.Pnh_Option4: 
        this._loadWorktrayComponent(PnhComponent); break;
      case PROCESS_NAMES.ATEOver4Days: this._loadWorktrayComponent(AteManagementComponent); break;
    }
  }
  get footerButtons(): FooterButton[] {
    if (this.worktrayComponent == null) { return []; }
    return this.worktrayComponent.footerButtons;
  }
  private clearHost() {
    this.worktrayComponent = null;
    this.worktrayComponentLoaded = false;
    this.raiserHost.viewContainerRef.clear();
  }
  private _loadWorktrayComponent(WorktrayComponent) {
    if (WorktrayComponent.dialogStyle) { this.config.style = WorktrayComponent.dialogStyle; }
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(WorktrayComponent);
    const viewContainerRef = this.raiserHost.viewContainerRef;
    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent(componentFactory);
    this.worktrayComponent = componentRef.instance as IWorktrayComponent;
    this.worktrayComponentLoaded = true;
    this.worktrayComponent.dialogRef = this.dialogRef;
    this.worktrayComponent.initialWorktrayData(this.worktrayItem, this.invoiceNumber);
    const cardHeadText = this.worktrayComponent.cardHeadText;
    if (cardHeadText) { this.cardHeadText = cardHeadText; }
  }
}

Parent Html

<ng-template worktray-host></ng-template>

<div class="card-footer component-footer">
  <div class="row">
    <div class="col-12" *ngIf="showProcessMessage">
      <label style="color: black">{{showProcessMessage}}</label>
    </div>
    <div class="col-12">
      <span *ngFor="let btn of footerButtons">
        <button *ngIf="worktrayComponent.isBtnVisible(btn.buttonName)" class="{{btn?.buttonClass}}" [disabled]="worktrayComponent.isBtnDisabled(btn.buttonName)" (click)="worktrayComponent.doAction(btn.buttonAction)" type="button">{{btn.buttonText}}</button>
      </span>
      <button class="btn btn-lg btn-cancel ml-2 justify-right" type="button" (click)="onClose()">Close</button>
    </div>
  </div>
</div>