Angular 6 + Bootstrap 4

Photo by Annie Spratt on Unsplash
Share this

 

Just a couple of steps and you will get your app ready to start theming with bootstrap 4. 

Everybody is happy with the new Angular 6 and a couple of months ago the release of Bootstrap 4. Today I will explain very quickly how to work with them. 

Let's start our project: 

$ ng new ng-bootstrap

Be carefull, you can not name your new project "bootstrap". If you do that, in the next step, trying to initialize bootstrap you will get something like this: 

npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "bootstrap" under a package
npm ERR! also called "bootstrap". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR! 

So, after creating a new angular name, we can navigate inside it, cd ng-bootstrap  and install our bootstrap cdn: 

$ npm install bootstrap --save

In angular 5 the angular-cli json was hidden, now in angular 6 it is on the root, please include your bootstrap style, above the style.css: 

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

 Okay, now we need something that replaces jQuery in Bootstrap, and as we all now, Angular and jQuery have a bad relationship. The plan B is @ng-bootstrap, which in the previous release was known as ngx-bootstrap. 

$ npm install --save @ng-bootstrap/ng-bootstrap

I get this two warning: 

npm WARN bootstrap@4.1.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.1.1 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself.

Should I be worried?

No, don't worry, according to StackOverflow, JB Nizet said: 

No. The jquery and popper js dependencies are only necessary if you use the JS part of Bootstrap. But ng-bootstrap's goal is precisely to replace this jquery-based JavaScript code with native Angular components, that do not depend on anything other than Angular (and RxJS, but Angular also depends on it).

So you should just ignore these two warnings. Bootstrap is needed by ng-bootstrap because it uses the Bootstrap CSS to implement its components and directives. But it doesn't use its JS code.

So, please don't worry about that warning. Let's move on!. 

In your app.module.ts you need to import the NgbModule.forRoot() using the forRoot() method.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//NgBootstrap module! 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NgbModule.forRoot(),
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

How to check if everything was fine? 

Before and after, they should look different!

details!

You can also inspect the elements, and look in the header!!

So, good luck! 

Comments

Submitted by scr888 2018 Thu, 05/17/2018 - 01:59

We stumbled over here coming from a different web address and
thought I should check thinggs out. I lioe what I see so now
i'm following you. Look forward to ooking over your
web page yet again.

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.