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.

score 0 · Accepted Answer · answered Oct 27 '18 at 06:57

0

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

answered Oct 27 '18 at 06:57

Suresh Kumar Ariya

9,516
1
18
27

Okay, thank you, Apparently, I need an alternative to alertifyjs. – kursat sonmez Oct 28 '18 at 07:59
1

@kursatsonmez It accepts both String or DOMElement, `_alertify.alert('Title' , this.customcomp.nativeElement)` works too! – MK. Dec 08 '18 at 18:01

Angular 6 component inside the alertifyjs

1 Answers1