Angular 6 component inside the alertifyjs

Question

I want to use the alertifyjs with angular 6. And want to embed angular component into the alertifyjs body.

Example code:

import * as _alertify from 'alertifyjs';
_alertify.alert('Title' , '<app-custom-component></app-custom-component>');

or

_alertify.alert('My Title', '<dx-data-grid ...>...</dx-data-grid>');

Example image with Devextreme datagrid

How can I do embed the angular component into the alertifyjs? Or, can I do?

Thanks.

Answer 1

You cannot pass the whole component as body content. As per the alertifyjs Docs, it supports title and body content as string. So you can pass component.elementref.nativeElement.innerHTML.

Template:

<app-custom-component #customcomp></app-custom-component>

Component:

@ViewChild('customcomp') customcomp : ElementRef;

ngAfterViewInit(){
   _alertify.alert('Title' , this.customcomp.nativeElement.innerHTML);
}