ng-bootstrap pas de travail dans angulaire 4
Je suis nouveau angulaire 4, je suis en train de configurer bootstrap.
J'ai installé ng-bootstrap:
https://ng-bootstrap.github.io/#/getting-started
J'ai fait tout comme sur la page, mais je ne vois pas le bootstrap sur ma page.
Voici mon code:
src/app/app.le 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>
J'ai essayé aussi un peu de code dans le index.html mais il ne fonctionne pas,
pour cette ligne je m'attends à voir un peu de couleur:
<h1 class="text-primary">{{title}} </h1>
Je ne trouve pas de référence de bootstrap lorsque je vérifie l'en-tête du code html.
Toute aide, s'il vous plaît?
Grâce
OriginalL'auteur MarcosF8 | 2017-07-08
Vous devez vous connecter pour publier un commentaire.
Dans la page que vous avez mentionné, ng-bootstrap mentionne bootstrap CSS comme une dépendance. Donc, c'est chargé séparément.
Si vous utilisez Angulaire de la CLI pour créer votre application, vous pouvez suivez ce guide officiel pour l'ajouter,
Mise à jour:
Comme mentionné dans le commentaire, ajouter le CSS pour
styles
dans.angular-cli.json
(ou toute autre modification de ce fichier) vous demandera de redémarrer votreng serve
oung build --watch
si vous vous êtes déjà en cours d'exécution.Mise à jour 2:
Angulaire 6 et plus, vous pouvez utiliser cette solution.
Aller à
styles.css
et ajoutez cette ligneVoir aussi comment cela fonctionne sous le capot:
https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975
OriginalL'auteur Meligy
Je ne vois pas de ng-bootstrap composant dans votre code! Je pense que vous êtes à la recherche pour le bootstrap css, qui est également une condition préalable pour le gn-bootstrap.
Ajouter ces lignes dans
index.html
entre les<head></head>
tag:OriginalL'auteur Nehal