angular2 How to get started using 'bootstrap-notify'

[leonidba]

What component should I import to my app.module in order start using 'bootstrap-notify'

[ivano33z]

add animate.css and bootstrap-notify.js to angular-cli then just use it from a component.

[jrrobles979]

can you elaborate?, Im new with Angular , I don't see the animate.css

[ivano33z]

Sorry i m not very good with english but i will give it a try.

First download animate.css from https://daneden.github.io/animate.css/, then import it into the angular project you are using - in the angular-cli file of the project under "css" section, also make sure to import bootstrap-notify.js file under "scripts" also in angular-cli file. Once you import these two files you are ready to use bootstrap notify wherever you like.

If you want a ready made solution you can also check "https://demos.creative-tim.com/material-dashboard-angular2/notifications" , its a free angular theme with bootstrap notify already implemented in it, so you can study it if you need help.

[jrrobles979]

mhhh... I did that and dosen't work, there is a specific version of jquery I have to use? I have this 2 errors:

the first one when I enter the angular app: Uncaught SyntaxError: Unexpected token < . scripts.js:14391 on the detail the error is in here: ! DOCTYPE html . <--Error , (I removed the <> tags because the editor didnt show it)

And the second when I call the notify function: $.notify is not a function this is how my angular.json looks like: "styles": [ "node_modules/font-awesome/css/font-awesome.css", "src/styles/app.scss", "src/styles/animate.css" ], "scripts": [ "node_modules/chart.js/dist/Chart.js", "node_modules/bootstrap-notify/bootstrap-notify.js" ] The jquery was added on the index.html like this:

[ivano33z]

Oh i forgot ... Make sure to declare jquery variables at the top of your component,

declare var jquery: any; declare var $: any;

So angular can recognize and use jquery from the component.

Also if you dont have boostrap installed the animation will look weird, so make sure that you also have bootstrap 3+ , preferably 4 .. in your project.

If there are still errors, i m not an expert but upload your code somewhere and i ll take a look.

[jrrobles979]

yes I have that, but still dosent work:

saveUserChanges(){ console.log("save changes...") $('.title2').slideToggle(); //Added to test jquery, works fine. $.notify({ message: 'Hello World' },{ type: 'danger' }); }

I also tryed this altought the documentation said not to use it:

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

still get the same error : notify is not a function

[ivano33z]

Allright there is a couple of things you could do:

• make sure you have the latest bootstrap-notify.js , double check the path is right and that the file is right.
• reload the project completely, close it and use "ng serve" again , angular-cli values need to be started from scratch in order to work.
• check the angular theme i sent you , it has a working bootstrap notify in it.

[jrrobles979]

ok I made it work, just if some one have the same problem, I did the next steps: on the file: package.json I added:

  "dependencies": {
..,
..,
  "jquery": "3.2.1",
    "bootstrap-notify": "3.1.3"
}

The same dependencies on the material-dashboard-angular project from ivano33z Then install the dependencies from NPM:

npm install

then on the file: angular-cli I add the notify and jquery path:

"styles": [
...,
...,
"src/styles/animate.css"
],
  "scripts": [
                   ...,
                  ...,
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap-notify/bootstrap-notify.js",
            ]

I dont know why, but if I added the jquery.js and notify.js manually, didn't work, have to use the npm install.

[ivano33z]

Interesting , so before when it wasnt working ..bootstrap-notify was not in the package.json ?

[jrrobles979]

that is correct, well at least in my project that was the case