Adding dynamically a dialog component within the body

Question

I need to manage the dialog component from a service, so each feature's component can invoke the service to open a screen in a dialog, so below my dialog component which displays a PrimeNG dialog:

 @Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})
export class DialogComponent {

  display = true;
  title = '';
  private componentRef;

  @ViewChild('content', { read: ViewContainerRef }) contentRef: ViewContainerRef;


  constructor() { }

  open(component, componentRef) {
    this.componentRef = componentRef;
    this.contentRef.createComponent(component);
  }

  onHide(){
    this.componentRef.destroy();
  }

}

And its template:

<p-dialog modal="true" [header]="title" [(visible)]="display" (onHide)="onHide()">
    <ng-template #content></ng-template>
</p-dialog>

Below my service:

@Injectable()
export class DialogService {

    rootViewContainer;

    constructor(private factoryResolver: ComponentFactoryResolver) { }

    setRootViewContainerRef(viewContainerRef) {
        this.rootViewContainer = viewContainerRef
    }

    public open(component) {
        let dialogFactory = this.factoryResolver.resolveComponentFactory(DialogComponent);
        let dialogRef = this.rootViewContainer.createComponent(dialogFactory);
        let componentFactory = this.factoryResolver.resolveComponentFactory(component);
        dialogRef.instance.open(componentFactory, dialogRef);
    }

}

I can call "setRootViewContainerRef" of the service using any component's container reference ("ViewContainerRef"), I need to get the reference of the body container so all my dialogs will be inserted into the body. How can I get the reference to the body element ?

Thanks

@angular/cdk may be what you are looking for https://material.angular.io/cdk/portal/overview — Ploppy, Feb 08 '18 at 16:58
It's angular CDK, not angular material, those are two different things. — Ploppy, Feb 08 '18 at 20:12
Did you try ``, as mentioned in [PrimeNG documentation](https://www.primefaces.org/primeng/#/dialog)? — ConnorsFan, Feb 08 '18 at 22:06
To inject a reference to the body in a service, take a look at [this question](https://stackoverflow.com/q/37521298/1009922). — ConnorsFan, Feb 08 '18 at 22:13

score 0 · Answer 1 · answered Feb 08 '18 at 17:09

0

See the detail how to add component dynamically on page

addComponent(){
  // check and resolve the component
  var comp = this._cfr.resolveComponentFactory(ExpComponent);
  // Create component inside container
  var expComponent = this.container.createComponent(comp);
  // see explanations
  expComponent.instance._ref = expComponent;
}

answered Feb 08 '18 at 17:09

Ali Adravi

21,707
9
87
85

I need to create the component within the main body container – mth khaled Feb 08 '18 at 17:22

Adding dynamically a dialog component within the body

1 Answers1