how to create html template in angular service and use it as a htmlTemplateRef?

Question

I am working on one large scale project on which, I need one requirement.

I am using one library that can open dialog(modal) popup for me. For that I needs to configure some options for that open modal process like this :

this.modalService.template(template, { data : { fruit: 'apple'} })

and template variable is declared like this :

@ViewChild(TemplateRef, { static: false }) template: TemplateRef<{}>;

But for that we needs one html template file which I don't have..

my service is like this :

@ViewChild(TemplateRef, { static: false }) template: TemplateRef<{}>;

constructor() {
}

ShowModal(){
   this.modalService.template(template, { data : { fruit: 'apple'} })
}

but I don't know how to use html template in angular service.

How can I use html html template in angular service ? if anyone knows answer then please mention here.

Answer 1

You can do it in one of two ways:

1. Create a component, which, when initialized, passes the template to the service, then load the component somewhere in your view.
2. Pass the templateRef when calling the ShowModal function: this.modalService.ShowModal(templateRef, data)

Option 1 feels more natural because you can really easily create the modal, and option 2 is for cases where the modal is completely different between each option, e.g. when you want to fill forms, etc.

Here is a snippet which shows option 1 (and adds another twist with a directive)