2

I would like to use bootstrap-notify in my Angular 7 application.

To do this, I have installed the bootstrap-notify package (and also @types/bootstrap-notify).

In my component from where I want to use the notifications I imported the jQuery service like this:

import * as $ from 'jquery';

And now called notify as described here in the documentation:

$.notify({
    // options
    message: 'Hello World' 
},{
    // settings
    type: 'danger'
});

The problem is that I get this error:

ERROR in src/app/home/home.component.ts(28,7): error TS2339: Property 'notify' does not exist on type 'JQueryStatic'.

Any idea how to make it work? I couldn't find any Angular (5/6/7) example that is using this package!

Rahul Pamnani
  • 1,397
  • 5
  • 26
  • 66
mariusmmg2
  • 713
  • 18
  • 37

1 Answers1

5

You can try the following.

1) First install type definition for jquery:

npm install @types/jquery

2) Then in component file, import jquery and notify and use them.

import * as $ from 'jquery';
import 'bootstrap-notify';

$[`notify`](....);

3) lastly, you also need to add css file/link to see it's actual styled.

demo https://stackblitz.com/edit/angular-custom-alert-message-hqrysq?file=app%2Fapp.component.ts

sometimes it throws error, but if you add some spaces to the code and save it, it will behave correctly.

ABOS
  • 3,723
  • 3
  • 17
  • 23