Brancher bootstrap sur son application Angular (Part 2/3)

Dans mon précédent billet, nous avons vu comment monter rapidement une application Angular.
Dans ce billet, nous verrons comment mettre en forme l'application précédente. N'étant pas du tout un ergonome, nous allons nous baser sur le fameux framework Bootstrap, et nous partirons sur bootstrap4 🙂

Mise en place de boostrap

Pour ajouter bootstrap sur une application Angular, nous avons plusieurs stratégies. Celle que nous allons utiliser est basée sur notre style, celui de bootstrap à l'aide de SCSS.

Par ailleurs, afin de nous faciliter l'intégration de bootstrap avec Angular4, l'équipe Angular participe à un projet de refonte de composant Bootstrap en composant Angular. Ce projet s'appelle ng-bootstrap.

Nous allons commencer par ajouter bootstrap et ng-bootstrap via yarn:

$>yarn add bootstrap@4.0.0-alpha.6 @ng-bootstrap/ng-bootstrap
Ajout de boostrap 4

Intégrer bootstrap dans le style de notre application

Modifier le fichier style.scss de la manière suivante:

/* You can add global styles to this file, and also import other style files */
// Bootstrap
$enable-flex: true; // Enable Flexbox mode
@import "../node_modules/bootstrap/scss/bootstrap";
Intégration de bootstrap

Démarrer désormais l'application et voilà :

Intégrer le menu sandwich

Pour réaliser le menu, nous allons utiliser la directive NgbCollapse fournie par Angular Bootstrap.
Pour cela, il faut déclarer que nous souhaitons utiliser l'ensemble des composants (cela sera plus simple pour la suite) de ng-bootstrap au sein de notre application:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { TalkComponent } from './talk/talk.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    TalkComponent
  ],
  imports: [
    NgbModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Import du module NgBootstrap

Puis au sein de notre template html remplacer l'ancien contenu par celui - là:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed"
          aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">
    {{title}}
  </a>
  <div [ngbCollapse]="!isNavbarCollapsed" class="collapse navbar-collapse" id="exCollapsingNavbar2">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link" routerLink="/" routerLinkActive="active">Home</a>
      <a class="nav-item nav-link" routerLink="/talk" routerLinkActive="active">Talk</a>
    </div>
  </div>
</nav>
<router-outlet></router-outlet>
Mise en place du menu sandwich

Et voilà le travail finie, vous devriez obtenir le résultat suivant:

Conclusion

Au sein de ce 2e billet, on a vu qu'on peut embellir assez facilement à l'aide de bootstrap notre petite application angular qui est devenue petite toujours mais jolie 🙂

Source

Retrouver les sources de ce 2e billet sur mon github.

Référence

Un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *