1. Home
  2. Forum
  3. Angular
  4. Load component using ejDialog

Load component using ejDialog

Hi,

Does your modal have the same capabilities as ngx-bootstrap:
https://valor-software.com/ngx-bootstrap/#/modals

From there you can create modal as simple as calling:
this.modalService.show(ModalContentComponent);

So, basically, I want to create modals (dialogs) that its content is a component that is loaded dynamically, only when I call show() method. I want also a method for hide() to hide the dialog and remove() to destroy the component and remove the dialog from DOM.

I couldn't find this in the documentation, so I'm guessing this feature isn't available?

11 Replies
SS Selvamani Sankarappan Syncfusion Team October 26, 2017 07:23 AM UTC

Hi Hussain,   
   
Thanks for contacting Syncfusion Support.   
   
Query: So, basically, I want to create modals (dialogs) that its content is a component that is loaded dynamically, only when I call show() method. I want also a method for hide() to hide the dialog and remove() to destroy the component and remove the dialog from DOM.   
   
You can achieve this requirement at ejDialog component using in-built methods and properties. Please refer to the following code example:   
   
[ts]   
onClick(event) {   
      var data = "Simple Dialog";   
      var obj = $("#termsDialog").ejDialog("instance");   
      obj.setContent(data);  // set the content dynamically.   
    }   
    onClick1(event) {   
      $("#termsDialog").ejDialog("close");  //to hide the dialog   
    }   
    onClick2(event) {   
      $("#termsDialog").ejDialog("open");  // to show the dialog   
    }   
    onClick3(event) {   
      $("#termsDialog").ejDialog("destroy"); //to destroy the dialog as well as remove the dom   
    }   
   
We have prepared a sample based on this. Please refer to the following sample: 
   
   
Run the following command to run the above sample:   
 
npm install   
npm start   
  
Query: I couldn't find this in the documentation, so I'm guessing this feature isn't available?   
 
  
We have documentation for this. Please refer to the following API link to know more about dialog component properties, methods and events.   
   
   
Refer to the following angular dialog getting started documentation link:   
 
   
Refer to the following demo:   
   
   
If the above solution does not meet your requirement, kindly revert with more details to provide an appropriate solution at the earliest.   
   
Regards,   
   
Selvamani S.   
 


HU Hussain November 9, 2017 07:13 AM UTC

Hello Selvamani ,

I'm not sure you got what I mean.

I want to load Angular components dynamically, not just simple html content.

So, If I have an Angular component named: add.user.component

I want to load this component dynamically when the user clicks on Add User button.


SS Selvamani Sankarappan Syncfusion Team November 10, 2017 10:47 AM UTC

 
Hi Hussain, 
 
Thanks for the update. 
 
We can add components dynamically by using dynamic component. You need to declare dynamic component in HTML page. In component class file, you can create ej-dialog dynamically and properties of dialog are mapped to its values in the constructor.  
For your reference, we have loaded the dialog while clicking the link and the sample is available from the link: 
 
To run the above sample, execute the below commands: 
npm install 
npm start 
 
If the above sample does not meet your requirement, kindly let us know with details to provide an alternative solution at the earliest. 
 
Regards, 
 
Selvamani S. 


HU Hussain November 12, 2017 06:44 AM UTC

Hello Selvamani ,

That still doesn't answer to my requirements.

I have add.user.component angular component, that is basically a form that you can submit.

I can easily open this component by using Angular router to route to it as usual.

I want to have extra functionality that allows me to load this component also into a modal dialog.

If you took a look at the link I posted for ngx-bootstrap free plugin:
https://valor-software.com/ngx-bootstrap/#/modals


You would see that you can easily does it like this way:

  1. <button type="button" class="btn btn-primary" (click)="openModalWithComponent()">Create modal with component</button>
  1. import { Component } from '@angular/core';
  2. import { BsModalService } from 'ngx-bootstrap/modal';
  3. import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
  4.  
  5. @Component({
  6. selector: 'demo-modal-service-component',
  7. templateUrl: './service-component.html'
  8. })
  9. export class DemoModalServiceFromComponent {
  10. bsModalRef: BsModalRef;
  11. constructor(private modalService: BsModalService) {}
  12.  
  13. openModalWithComponent() {
  14. const list = [
  15. 'Open a modal with component',
  16. 'Pass your data',
  17. 'Do something else',
  18. '...'
  19. ];
  20. this.bsModalRef = this.modalService.show(ModalContentComponent);
  21. this.bsModalRef.content.title = 'Modal with component';
  22. this.bsModalRef.content.list = list;
  23. setTimeout(() => {
  24. list.push('PROFIT!!!');
  25. }, 2000);
  26. }
  27. }
  28.  
  29. /* This is a component which we pass in modal*/
  30.  
  31. @Component({
  32. selector: 'modal-content',
  33. template: `
  34. <div class="modal-header">
  35. <h4 class="modal-title pull-left">{{title}}</h4>
  36. <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
  37. <span aria-hidden="true">&times;</span>
  38. </button>
  39. </div>
  40. <div class="modal-body">
  41. <ul *ngIf="list.length">
  42. <li *ngFor="let item of list">{{item}}</li>
  43. </ul>
  44. </div>
  45. <div class="modal-footer">
  46. <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Close</button>
  47. </div>
  48. `
  49. })
  50. export class ModalContentComponent {
  51. title: string;
  52. list: any[] = [];
  53. constructor(public bsModalRef: BsModalRef) {}
  54. }
 

SS Selvamani Sankarappan Syncfusion Team November 13, 2017 12:14 PM UTC

Hi Hussain,   
   
Thanks for the update.   
   
We have checked your shared code example and we have understood as you need to invoke (this.modalService.show()) the dialog method using Dialog Angular component which is created in ts file from that link. If this is your requirement, you can invoke the methods using Angular component instance. Please refer to the following code example:   
   
[app.component.ts]   
import { Component, ViewChild } from '@angular/core';   
        import { EJComponents } from 'ej-angular2';   
   
        @Component({   
            selector: 'ej-app',   
            template: ` <h2>Dialog</h2>   
            <button id="clearTxt" (click)="buttonclick($event)">Open Dialog</button>   
            <ej-dialog #dialog title="Dialog" id="dialog" [showOnInit]="false"></ej-dialog>`   
        })   
        export class AppComponent {   
          @ViewChild('dialog') dialog: EJComponents<any, any>;   
                    constructor() {   
          
                    }     
                    buttonclick(e){   
                        this.dialog.widget.open();   
                    }   
        }   
   
Refer to the following sample:   
 
   
Refer to the following link:  
  
   
If still you face any difficulties to invoke the methods, kindly let us know. We will be happy to help you.   
   
Regards,   
   
Selvamani S.   


HU Hussain November 14, 2017 05:59 AM UTC

Hi Selvamani, 

You still don't get what I mean.

Yes, I want to invoke:

this.modalService.show(ModalContentComponent);

But you missed the most important thing which is the thing I want. The passed parameter.

You shared this method earlier:

      var obj = $("#termsDialog").ejDialog("instance");   
      obj.setContent(data);  // set the content dynamically.   

And I mentioned that what I need is to pass an Angular component to this method.

Lets say I have this component:

  1. @Component({
  2. selector: 'add-user',
  3. template: `
  4. <div class="modal-header">
  5. <h4 class="modal-title pull-left">{{title}}</h4>
  6. <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
  7. <span aria-hidden="true">&times;</span>
  8. </button>
  9. </div>
  10. <div class="modal-body">
  11.           Username: <input type="text" [(ngModel)]="username"/>
  12. </div>
  13. <div class="modal-footer">
  14. <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Close</button>
  15. </div>
  16. `
  17. })
  18. export class AddUserComponent{
  19. title: string;
  20. list: any[] = [];
  21. constructor(public bsModalRef: BsModalRef) {}
  22. }

This component is stored in app/Components/add-user folder.

Now, in another component, let's say the app component which is located in app/app.component, we want to open this component, but inside a modal dialog.

With ngx-bootstrap, I can do this:

  1. import { Component } from '@angular/core';
  2. import { BsModalService } from 'ngx-bootstrap/modal';
  3. import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
  4. import { AddUserComponent } from 'app/Components/add-user';
  5.  
  6. @Component({
  7. selector: 'demo-modal-service-component',
  8. template: '<button type="button" class="btn btn-primary" (click)="showAddUserModal()">Add User</button>'
  9. })
  10. export class AppComponent{
  11. bsModalRef: BsModalRef;
  12. constructor(private modalService: BsModalService) {}
  13.  
  14. showAddUserModal() {
  15. this.bsModalRef = this.modalService.show(AddUserComponent );
  16. this.bsModalRef.content.title = 'I can set the title for Add user component from here';
  17. }
  18. }

As you can see, I could open AddUserComponent which is an Angular component that it defined in another folder in a modal dialog.

SS Selvamani Sankarappan Syncfusion Team November 17, 2017 09:47 AM UTC

Hi Hussain, 
 
Thanks for your patience. 
 
We have checked your shared code example and you can use ComponentFactoryResolver load the components dynamically. Please refer to the below code example to load component dynamically in another component. 
 
[grid.component.ts] 
ngAfterViewInit() { 
        let componentFactory = this.componentResolver.resolveComponentFactory(Newcomponent); 
        const ref = this.viewContainerRef.createComponent(componentFactory); 
        this.dialog.widget.setContent(ref._view.nodes[0].renderElement); 
    } 
     buttonclick(e) { 
         this.dialog.widget.open();   
     } 
 
Refer to the following sample: 
 
 
If the above does not meet your requirement, kindly let us know. We will be happy to help you. 
 
Regards, 
 
Selvamani S. 


HU Hussain November 20, 2017 06:04 AM UTC

That is what I wanted. I hope you add this to your APIs in next releases to make it easier.

Thanks Selvamani,


SS Selvamani Sankarappan Syncfusion Team November 21, 2017 09:01 AM UTC

Hi Hussain, 
 
Thanks for the update. We will add this at documentation in next releases. 
 
Please let us know if you need any further assistance. 
 
Regards, 
 
Selvamani S. 


AA Ambdas Avhad replied to Selvamani Sankarappan November 25, 2022 12:46 PM UTC

Hello Selvamani,

Is this added to documentation? If yes can you please share link.


Thank you!!


IL Indhumathy Loganathan Syncfusion Team December 14, 2022 02:14 PM UTC

Ambdas, Currently, we are focusing on the EJ2 and Blazor platforms and not considering improvements to the EJ1 platform. We have already created a general blog to achieve this same requirement in EJ2 Dialog. Check out the below link.


https://medium.com/@ankit_saxena/how-to-reuse-syncfusion-dialog-component-with-angular-dynamic-component-loading-dbf3dcda3302


We suggest you make use of our EJ2 component and check the shared details. You can revert to us if you need any further assistance.


Loader.
Up arrow icon