Extend PrimeNG Components

Question

Trying to extend the dialog functionality from PrimeNG Library

The Error occurs when dialog is displayed, no errors when not displayed

this.containerViewChild is undefined

What I have

import { Component, Input, OnInit, Output, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Dialog, DomHandler } from 'primeng/primeng';

const DIALOG_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => Dialog),
    multi: true
};
@Component({
    selector: 'sb-dialog',
    providers: [DIALOG_VALUE_ACCESSOR, DomHandler],
    template: ''
})
export class MyDialogComponent extends Dialog {
    ngOnInit(): void {
    }
}

Goal: Please help me resolve this error and hopefully create a working extension of Dialog class.

Answer 1

Turned out it didn't need anything fancy just needed to copy the template over. Everything else seem to have worked simply by extending it

import { Component, Input, OnInit, Output, forwardRef, Inject, ElementRef,Renderer2, NgZone } from '@angular/core';
import { Dialog, DomHandler } from 'primeng/primeng';

@Component({
    selector: 'sb-dialog',
    providers: [DomHandler],
    template: `
        <div #container [ngClass]="{'ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow':true, 'ui-dialog-rtl':rtl,'ui-dialog-draggable':draggable}" [style.display]="visible ? 'block' : 'none'"
            [ngStyle]="style" (scroll)="onScroll($event)" [class]="styleClass" [style.width.px]="width" [style.height.px]="height" [style.minWidth.px]="minWidth" [style.minHeight.px]="minHeight" (mousedown)="moveOnTop()" [@dialogState]="visible ? 'visible' : 'hidden'"
            role="dialog" [attr.aria-labelledby]="id + '-label'">
            <div #titlebar class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top"
                (mousedown)="initDrag($event)" *ngIf="showHeader">
                <span [attr.id]="id + '-label'" class="ui-dialog-title" *ngIf="header">{{header}}</span>
                <span [attr.id]="id + '-label'" class="ui-dialog-title" *ngIf="headerFacet && headerFacet.first">
                    <ng-content select="p-header"></ng-content>
                </span>
                <a *ngIf="closable" [ngClass]="{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}" href="#" role="button" (click)="close($event)" (mousedown)="onCloseMouseDown($event)">
                    <span class="pi pi-times"></span>
                </a>
            </div>
            <div #content class="ui-dialog-content ui-widget-content" [ngStyle]="contentStyle">
                <ng-content></ng-content>
            </div>
            <div class="ui-dialog-footer ui-widget-content" *ngIf="footerFacet && footerFacet.first">
                <ng-content select="p-footer"></ng-content>
            </div>
            <div *ngIf="resizable" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"
                (mousedown)="initResize($event)"></div>
        </div>
    `
})
export class MyDialogComponent extends Dialog {
    ngOnInit(): void {
    }
    onScroll(evt) {
        console.log(evt);
    }
}