{"id":445,"date":"2020-09-22T13:23:41","date_gmt":"2020-09-22T11:23:41","guid":{"rendered":"http:\/\/www.myblog.nguenkam.com\/?p=445"},"modified":"2022-06-08T17:59:52","modified_gmt":"2022-06-08T15:59:52","slug":"how-to-add-bootstrap-to-an-angular-cli-project","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2020\/09\/22\/how-to-add-bootstrap-to-an-angular-cli-project\/","title":{"rendered":"How to add Bootstrap to an Angular CLI project"},"content":{"rendered":"\n

I used to struggle with this case, long time ago, how to setup an Angular project generated with Angular CLI with Bootstrap. So let\u2019s see the step by step in the sections below.<\/p>\n\n\n\n

1: Creating an Angular project with Angular CLI<\/span><\/h4>\n\n\n\n
ng new angular-bootstrap-example<\/code><\/pre>\n\n\n\n
2: Installing Bootstrap from NPM<\/span><\/h4>\n\n\n\n
For Bootstrap 3:<\/p>\n\n\n\n
npm install bootstrap@3.3.7<\/code><\/pre>\n\n\n\n
For Bootstrap 4:<\/p>\n\n\n\n
npm install bootstrap<\/code><\/pre>\n\n\n\n
2.1: Alternative: Local Bootstrap CSS<\/span><\/h4>\n\n\n\n
As an alternative, you can also download the Bootstrap CSS and add it locally to your project. let us donwload Bootstrap from the website<\/a> and create a folder styles<\/code> (same level as styles.css<\/code>):<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 Don\u2019t place your local CSS files under assets<\/code> folder. When we do the production build with Angular CLI, the CSS files declared in the angular.json<\/code> will be minified and all styles will be bundled into a single styles.css. The assets folder is copied to the dist folder during the build process (the CSS code will be duplicated). Only place your local CSS files under assets<\/code> in case you are importing them directly in the index.html<\/code>.<\/p><\/blockquote>\n\n\n\n
3: Importing the CSS<\/span><\/h4>\n\n\n\n
We have two options to import the CSS from Bootstrap that was installed from NPM:<\/p>\n\n\n\n
1: Configure angular.json<\/code>:<\/p>\n\n\n\n
\"styles\": [\n  \"node_modules\/bootstrap\/dist\/css\/bootstrap.min.css\",\n  \"styles.scss\"\n]<\/code><\/pre>\n\n\n\n
2: Import directly in src\/style.css<\/code> or src\/style.scss<\/code>:<\/p>\n\n\n\n
@import '~bootstrap\/dist\/css\/bootstrap.min.css';<\/code><\/pre>\n\n\n\n
3.1 Alternative: Local Bootstrap CSS<\/span><\/h4>\n\n\n\n
If you added the Bootstrap CSS file locally, just import it in angular.json<\/code><\/p>\n\n\n\n
\"styles\": [\n  \"styles\/bootstrap-3.3.7-dist\/css\/bootstrap.min.css\",\n  \"styles.scss\"\n],<\/code><\/pre>\n\n\n\n
or  import it in src\/style.css<\/code>:<\/p>\n\n\n\n
@import '.\/styles\/bootstrap-3.3.7-dist\/css\/bootstrap.min.css';<\/code><\/pre>\n\n\n\n
Yet, we are able to start using the Bootstrap CSS classes in our project.<\/p>\n\n\n\n
In case we don\u2019t need to use Bootstrap JavaScript components (that require JQuery), this is all the setup we need. But if we need to use modals, accordion, datepicker, tooltips or any other component, how can we use these components without installing jQuery?<\/span><\/p>\n\n\n\n
There is an Angular wrapper library for Bootstrap called ngx-bootstrap<\/a> that we can also install from NPM:<\/p>\n\n\n\n
npm install ngx-bootstrap --save<\/code><\/pre>\n\n\n\n
ng2-bootstrap<\/code> and ngx-bootstrap<\/code> are the same package. ng2-bootstrap was renamed to ngx-bootstrap after #itsJustAngular<\/code>.<\/p><\/blockquote>\n\n\n\n
4: Bootstrap JavaScript Components with ngx-bootstrap <\/span><\/h4>\n\n\n\n
4.1 : Adding the required Bootstrap modules in app.module.ts<\/span><\/h4>\n\n\n\n
Go through the ngx-bootstrap<\/code> and add the modules needed in your app.module.ts<\/code>. For example, suppose we want to use the Dropdown, Tooltip and Modal components:<\/p>\n\n\n\n
mport { BsDropdownModule } from 'ngx-bootstrap\/dropdown';\nimport { TooltipModule } from 'ngx-bootstrap\/tooltip';\nimport { ModalModule } from 'ngx-bootstrap\/modal';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    BsDropdownModule.forRoot(),\n    TooltipModule.forRoot(),\n    ModalModule.forRoot()\n  ],\n  \/\/ ...\n})\nexport class AppBootstrapModule {}<\/code><\/pre>\n\n\n\n
Because we call the .forRoot()<\/code> method for each module (due the ngx-bootstrap module providers), the functionalities will be available in all components and modules of your project (global scope).<\/p>\n\n\n\n
As an alternative, if you would like to organize the ngx-bootstrap<\/code> in a different module (just for organization purposes in case you need to import many bs modules and don\u2019t want to clutter your app.module), you can create a module app-bootstrap.module.ts<\/code>, import the Bootstrap modules (using forRoot()<\/code>) and also declare them in the exports section (so they become available to other modules as well).<\/p>\n\n\n\n
import { NgModule } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\n\nimport { BsDropdownModule } from 'ngx-bootstrap\/dropdown';\nimport { TooltipModule } from 'ngx-bootstrap\/tooltip';\nimport { ModalModule } from 'ngx-bootstrap\/modal';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    BsDropdownModule.forRoot(),\n    TooltipModule.forRoot(),\n    ModalModule.forRoot()\n  ],\n  exports: [BsDropdownModule, TooltipModule, ModalModule]\n})\nexport class AppBootstrapModule {}<\/code><\/pre>\n\n\n\n
At last, don\u2019t forget to import your bootstrap module in you app.module.ts<\/code><\/p>\n\n\n\n
import { AppBootstrapModule } from '.\/app-bootstrap\/app-bootstrap.module';\n\n@NgModule({\n  imports: [BrowserModule, AppBootstrapModule],\n  \/\/ ...\n})\nexport class AppModule {}<\/code><\/pre>\n\n\n\n
Now, We have an Angular project using Bootstrap and did not need to import JQuery to have the same behavior!<\/p>\n\n\n\n
<\/p>\n\n\n\n
Reference<\/h5>\n\n\n\n
https:\/\/loiane.com\/<\/a><\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
I used to struggle with this case, long time ago, how to setup an Angular project generated with Angular CLI with Bootstrap. So let\u2019s see the step by step in the sections below. 1: Creating an Angular project with Angular CLI 2: Installing Bootstrap from NPM For Bootstrap 3: For Bootstrap 4: 2.1: Alternative: Local […]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37,108,89],"tags":[40,109],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/445"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=445"}],"version-history":[{"count":5,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/445\/revisions"}],"predecessor-version":[{"id":459,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/445\/revisions\/459"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}