Search code examples
angularnotificationsbootstrap-4notify

Using bootstrap-notify with Angular 7

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!

Solution

  • 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.