Show bootbox alert in Typescript/Angular2?

Question

I want to use Bootbox in my Angular2 project. I searched a lot but there is no any relevant solution for me.
I also tried angular2-modal but there were many issues while using angular2-modal, please suggest any good doc/Examples/Demos for the same.

score 6 · Accepted Answer · edited Jul 10 '17 at 18:23

6

Step 1: Install bootbox via npm install bootbox --save

Step 2: If you are using systemjs then include bootbox like:

<script src="node_modules/bootbox/bootbox.js"></script>

Step 3: Just put declare var bootbox:any; after import all libreries and before component decorator in your component ts file and then use normaly like bootbox.alert("Hello world!"); on any function call.

Make sure you have bootstrap and jquery installed and included in index page. jquery should be in first place then after bootstrap.

[Edit]

Alternate Step 3 Instead of declare var bootbox:any;, import type type definitions instead:

npm install @types/jquery --save
npm install @types/bootbox --save

edited Jul 10 '17 at 18:23

Michael Kang

52,003
16
103
135

answered Feb 24 '17 at 08:58

vikas

1,000
9
19

what should i import in my .ts file ? – Shubham Verma Feb 24 '17 at 09:00
Hi @Vikas, Thanks for your answer, but after doing this i got this error:team.component.html:4:2 caused by: bootbox is not defined, Please suggest me how i define bootbox. – Shubham Verma Feb 24 '17 at 09:03
Thank you so much , You saved my time. :) – Shubham Verma Feb 24 '17 at 09:10
3

instead of `declare var bootbox:any`, you can install @types/bootbox: `npm install @types/bootbox --save` – Michael Kang Feb 24 '17 at 09:13
@Pixelbits, Then how I will get the reference of bootbox in my .ts file ? – Shubham Verma Feb 24 '17 at 09:18
you don't. the type is automatically resolved. – Michael Kang Feb 24 '17 at 09:19
@pixelbits, i tried your solution but error: "caused by: bootbox is not defined " occurred. – Shubham Verma Feb 24 '17 at 09:25
should I use in my index. – Shubham Verma Feb 24 '17 at 09:26
after including then its worked. – Shubham Verma Feb 24 '17 at 09:26
1

Any Idea how to do this if you are not using systemjs? – mad_fox May 02 '17 at 16:28
2

@pixelbits I am facing the similar problem but this time I am getting $.fn.modal of undefined. I am using following statement to load files import * as $ from 'jquery'; import * as bootstrap from 'bootstrap'; import * bootbox from "bootbox" – Mantu Nigam Jul 10 '17 at 16:02
Bootbox has types: npm install @types/bootbox – Michael Kang Jul 10 '17 at 18:21
1

@MantuNigam ... try this --> "scripts": [ "../node_modules/bootbox/bootbox.js" ] in .angular-cli.json file, after installing bootbox with npm -and dont forget to restart server – Gokulraj Mahadheeraa Jul 12 '17 at 06:46
great solution. +1 – Mihai Alexandru-Ionut Aug 30 '17 at 13:21

Show bootbox alert in Typescript/Angular2?

1 Answers1

Linked