angular6alertifyjs

Angular 6 component inside the alertifyjs

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.

Solution

  • 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);
}