How to use bootstrap 4 in angular 2?

Question

I\'m building an angular 2 app written in typescript. It would use the bootstrap 4 framework in combination with some custom theming, is this possible?

The \"ng2-boo

Answer 1

The options above will work, however I use this approach via NPM:

1. Navigate to: Bootstrap 4 and retrieve the npm command

2. Run the NPM command obtained from step 1 in your project i.e

   npm install bootstrap@4.0.0-alpha.5 --save

3. After installing the above dependency run the following npm command which will install the bootstrap module npm install --save @ng-bootstrap/ng-bootstrap You can read more about this here

4. Add the following import into app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; and add NgbModule to the imports

5. Your app module will look like this:

   import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
      declarations: [
      AppComponent,
      WeatherComponent
   ],
     imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     NgbModule.forRoot(), // Add Bootstrap module here.
   ],
     providers: [],
     bootstrap: [AppComponent]
   })
   
   export class AppModule { }
   

6. Open angular-cli.json and insert a new entry into the styles array :

   "styles": [
     "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
   

7. Open src/app/app.component.html and add

   hello
   

   or if you would like to use ng alert then place the following on your app.component.html page

   I'm a dismissible alert :) 
   

8. Now run your project and you should see the bootstrap alert message in the browser.

NOTE: You can read more about ng Components here