igx-dialog - having trouble using ngComponentOutlet to render a component in a dialog

335

Walter Zielenski posted 2 months ago

I have a dialog coded in my AppCompinent.html as follows.

<igx-dialog #modal
(leftButtonSelect)="clickDialog()"
leftButtonLabel="OK to Update"
title="Dialog Title"
message="Dialogmessage”
>
<ng-container [ngComponentOutlet]="component"></ng-container>
</igx-dialog>

In my AppComponent.ts, I have the following:

@ViewChild('modal') modal!: IgxDialogComponent;
...
protected component: Type<Comp3Component> | null = Comp3Component
....
this.modal.open()

Comp3Component is a simple component rendering an igx-tab with a, igx-grid on one tab and other controls on the other tab.

But it could also be a newly created component that simply renders Comp3Component Works!.

My issue is that my Comp3Component does not render in the dialog.

Is it possible to render a component in the dialog? If it is, what am I doing wrong?

700

Offline Riva Ivanova posted 2 months ago in reply to Walter Zielenski

Hello Walter,

I am glad that you found a solution and managed to achieve your requirements!

Indeed, when setting the message property and adding custom content, the custom content will be disregarded since the message property is with higher priority.

Thank you for using Infragistics components!

Sincerely,
Riva Ivanova
Software Developer
Cancel
Reply

Cancel

335

Offline Walter Zielenski posted 2 months ago

Never Mind.

I found that as long as I do include message="Dialogmessage” in the html, or try to set it in the ts file, then the component will load.

<igx-dialog #modal>

This message is passed into the dialog using interpolation, and not using the dialog's textMessage property: {{message}}

<ng-container [ngComponentOutlet]="component"></ng-container>

<button *ngFor="let button of buttons" igxButton (click)="button.function()">{{button.caption}}</button>

</div>

</igx-dialog>

  public buttons: any[] = []
  public message: string = '';
  protected component: Type<Comp3Component> | null = Comp3Component
  
  openModal (event: EmitEvent) {
    let options: optionsDialog = event.options;
    console.log('opening modal', this.modal);

    this.modal.closeOnOutsideSelect = options.autoHide;
    this.modal.title = options.title;
    // this.modal.message = options.textMessage;  // if you set the message property, you will not be able to load a component
    this.message = options.textMessage;

    this.buttons = [];
    this.buttons.push ({ caption: 'OK (Callback Function)', function: options.btnToastClickAction })
    this.buttons.push ({ caption: 'Cancel (Closes Dialog)', function: () => this.modal.close() })

    this.modal.open();
  }

I am trying to upload a picture, but it is not working - trying 1 more time

here is a gif