ng-bootstrap not working in angular 4
Asked Answered
F

2

18

I am new with angular 4, I am trying to configure bootstrap. I installed ng-bootstrap:

https://ng-bootstrap.github.io/#/getting-started

I did all like on the page, but I don't see the bootstrap on my page. Here is my code:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

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

src/app/app.component.html

<div class="container">

<h1 class="text-primary">{{title}} </h1>

<h2 class="text-primary">My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
   </li>
</ul>

<div class="alert alert-success" role="alert">
 <strong>Well done!</strong> You successfully read this important alert 
   message.
</div>

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
  <label>name: </label>
  <input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>

I tried also some code in the index.html, but it does not work,

for this line I am expecting to see some color:

<h1 class="text-primary">{{title}} </h1>

I don't find any reference of bootstrap when I check the header of the html. Any help, please? Thanks

Forespeak answered 8/7, 2017 at 22:18 Comment(0)
C
46

In the page you mentioned, ng-bootstrap mentions bootstrap CSS as a dependency. So that's loaded separately.

If you are using Angular CLI to create your application, you can follow this official guide to add it,

Update:

As mentioned in the comment, adding the CSS to styles in .angular-cli.json (or any other changes to this file) will require you to restart your ng serve or ng build --watch if you have either already running.

Update 2 (Current Recommended Approach):

For Angular 6 and higher you can use this solution.

Go to styles.css and add this line

@import "~bootstrap/dist/css/bootstrap.css";

See also how this works under the hood:

https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975

Creature answered 9/7, 2017 at 3:2 Comment(4)
thanks a lot, I needed to restart the ng serve, it is working nice! thanksForespeak
thanks, for me the following works: @import "../node_modules/bootstrap/dist/css/bootstrap.css";Mcmanus
For Angular 6 and higher you can use this solution. Go to styles.css and add this line @import "~bootstrap/dist/css/bootstrap.css"; its work coolFullblown
Yes, that's what Update 2 from September 2018 recommended. I made it more clear this is the recommended approach. Thanks.Creature
T
1

I don't see any ng-bootstrap component in your code! I think you are looking for bootstrap css, which is also a prerequisite for ng-bootstrap.

Add these lines in index.html between the <head></head> tag:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Taxicab answered 9/7, 2017 at 1:53 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.