Quick question please. Although I see similar questions similar to mine, I seem not to understand the response. Here's the deal. Ideally, if there's a page that was created using bootstrap which uses a javascript function. This function would either be included within the bootstrap html file or the javascript file would would be made as an external file and called somewhere in the bootstrap html tags. So my question is how do I use this javascript file(embedded/external) function in Angular?Is it in the index file or .ts file or where? Thank you.
Add a comment
|
1 Answer
It depend on how you want to add bootstrap to your project. If you want to install bootstrap directly to your project, you will edit your index.html file as shown bellow:
...
<head>
...
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Insert your bootstrap CSS here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
<!-- Your JQuery here -->
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<!-- Your bootstrap JavaScript here -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
After this, you can go ahead and start using it in your application. For example you can edit your app.component.html with the following code to test that bootstrap works.
<div class="container">
<div class="jumbotron">
<h1>Angular</h1>
<h2>Bootstrap Test</h2>
</div>
<div class="panel panel-primary">
<div class="panel-heading">My App Status</div>
<div class="panel-body">
<h3>{{title}}</h3>
</div>
</div>
</div>
You can also install bootstrap and JQuery using npm like this:
$ npm install bootstrap@3 jquery --save. This will add the bootstrap and JQuery to your node_modules directory. The needed file are:
node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js
After that update your .angular-cli.json (if your using angular/cli) to add these files to the project:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Or you can use the <link> and <script> tags to add them directly to your index.html as shown above.
Or you can install bootstrap using NG-Bootstrap via npm: npm install --save @ng-bootstrap/ng-bootstrap
After the installation import their main module in your NGModule.
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Any other module needing to use bootstrap will need to import bootstrap main NgModule. You can fine example on how to use NG-Bootstrap here
1 Comment
Kalenda
Glad I could help, @user3679513.