Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-bootstrap not working in angular 4

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

like image 663
MarcosF8 Avatar asked Jul 08 '17 22:07

MarcosF8


People also ask

Why my bootstrap is not working?

These are the possible reasons: You have a wrong or incorrect link to the bootstrap file. browser caching and history is messing with your html. Other CSS files are overriding the bootstrap file.

Does ng bootstrap need bootstrap?

ng-bootstrap depends on Bootstrap's CSS being available, but you don't need the Bootstrap JS or jQuery dependencies.


1 Answers

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

like image 74
Meligy Avatar answered Sep 20 '22 16:09

Meligy