CODEWITHSUNDEEP
angularnotificationsbootstrap-4notify
mariusmmg2
mariusmmg2

Reputation: 723

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!

Upvotes: 2

Views: 5164

Answers (1)

ABOS
ABOS

Reputation: 3823

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.

Upvotes: 5

Related Questions