Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Walter Zielenski
335
igx-dialog - having trouble using ngComponentOutlet to render a component in a dialog
posted

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?

Parents
  • 335
    Offline posted

    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>

      <div igxDialogActions>
          <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

Reply Children
No Data