1

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?

MK.
  • 5,139
  • 1
  • 22
  • 36
null_pointer
  • 1,779
  • 4
  • 19
  • 38
  • The alertify popup seem to use absolute positioning that is set in the alertify.css file. Can you make sure that this file is actually downloaded and applied in your component or if something override the ajs-modal class style – hagner Oct 29 '17 at 16:27
  • yes it appears to be part of the bundle. – null_pointer Oct 29 '17 at 21:47
  • Using webpack dev-server, I can definitely see the css file in the `bundle`. However when using Chrome dev tools it doesn't appear any style are getting applied. My best guest is the css is encapsulated in my component and the `prompt` is getting created outside my component? – null_pointer Oct 29 '17 at 22:39

1 Answers1

0

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.

null_pointer
  • 1,779
  • 4
  • 19
  • 38
  • If adding to styles.css, you don't need to import that style into every component you use it in, or mess with view encapsulation at all. If adding to styles.css doesn't work, check to see if the that css is loading correctly, and whether you override any styles elsewhere in your app. Also, don't need to add ../../styles.css' to all your components, it's included for the entire app. – Alic W Oct 30 '17 at 03:13
  • Taking out `'../../../node_modules/alertifyjs/build/css/alertify.css',` still doesn't work. I looked at the styles bundle and I do see alertifyjs css in there but it still doesn't appear to work. I haven't overridden any styles. Still trying to figure out what i'm doing wroing. – null_pointer Oct 30 '17 at 03:17