Is it possible to add an entire angular component inside sweet alert 2?

Question

I wanted to know if there is a way to make an angular component open up in a sweet alert box, for example

 Swal.fire(
  {
    HTML: '<app-exampleselector></app-exampleselector>',
  })

what I intended was to use the component selector instead of writing code inside the function, which in turn is not an option cause I intend to use a lot of functions including database service functions as well which makes it quite a bulky code. is there a way to do this? or should I settle on opening the component on a new tab?

Elzaelzevir

github.com/sweetalert2/ngx-sweetalert2/issues/19 – Accessary

Out of curiosity, have you managed to do this, or did you do it in a different way? :) I'd like to do this as well. – Langlauf

Answer 1

the answer is more or less!

but its not like your example. If you want, you can instantiate the component you desire to be in the alert inside the other component wich you will trigger the alert. put a template ref (#myAlert for instance), get the reference using @ViewChild and pass the reference to the sweetalert on html parameter:

//app.component.html
<div style="display: none;"> <!--YOU NEED TO PUT THE COMPONENT INSIDE A HIDDEN DIV-->

<app-my-alert-content #myAlert [inputSomething]="inputSomething"></app-my-alert-content>    
</div>

------------------------
//app.component.ts

import Swal from 'sweetalert2';

@ViewChild('myAlert',{static: false})
myAlert: ElementRef;

triggerAlert(){
  Swal.fire({
    html: this.myAlert.nativeElement
  });
}

Sustentation

In my case I should wrap angular component with another <div #myAlert> ... </div> and set a reference on it, because nativeElement right there swal.fire({ html: this.myAlert.nativeElement }); was undefined. – Appendix