Popup showing below page instead of as popup

Question

I am trying to use alertify in a angular 4 application but I can't seem to git it to work.

So I started by adding alertify to my component by adding the css

 styleUrls: [
    './myComponent.component.scss',
    '../../../node_modules/alertifyjs/build/css/alertify.css'
  ]

Now I import the library:

import * as alertify from 'alertifyjs';

Later inside a function that is triggered by a button click I put

alertify.prompt('Prompt Message');

The popup is showing as a block element right below my entire component instead of being a popup .

I am not sure what I am doing wrong?

Answer 1

Ok, I got it to work even though I don't like the solution i'm using. So I noticed alertify is getting put in the vendor bundle(which makes sense). So I used:

encapsulation: ViewEncapsulation.None,

so it would see the styles in the vendor bundle.

Another approach I tried which was putting this line in style.css :

@import '~alertifyjs/build/css/alertify.css';

than adding

  styleUrls: [
    './myComponent.component.scss',
    '../../../node_modules/alertifyjs/build/css/alertify.css',
    '../../styles.css'
  ],

and removing encapsulation: ViewEncapsulation.None, . Unfortunately that didn't work as I hoped it would.

I don't like the approach i'm using because I lose encapsulation.

If anyone can come up with a different solution please let me know.