11 Integrare Bootstrap, font awesome e navbar in Angular

Pubblicato il di

In questa lezione vedremo come installare e integrare bootstrap per angular e i font awesome.

Il comando è molto semplice, si sfrutterà il gestore pacchetti npm

npm i bootstrap font-awesome angular-font-awesome --save -dev

A questo punto bisogna individuare il percorso di installazione di bootstrap e dei fonts che solitamente sono nella cartella node_modules

/node_modules/bootstrap/dist/css

a questo punto integriamo la path del file bootstrap.min.css e font-awesome.min.css nel file angular.json sotto nella direttiva styles

"styles": [
 "node_modules/bootstrap/dist/css/bootstrap.min.css",
 "node_modules/font-awesome/css/font-awesome.min.css",
 "src/styles.scss"
],

Una volta finito riavviare il server per applicare i cambiamenti. Ora possiamo applicare le classi di bootstrap e i fonts awesome ai nostri template dei componenti..

Navbar

Vediamo come integrare e far funzionare la barra di navigazione navbar di bootstrap, dal sito prendiamo il codice di una navbar

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="#">Top navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

ora creiamo un nuovo componente <app-nav> e dopo aver copiato il codice nel suo template, lo includiamo all’inizio del nostro app.component. Spostiamo il link di Nuovo utente nella navbar come voce di menu al posto di link

<li class="nav-item">
 <a class="nav-link" href="#" (click)="newUser()">Nuovo Utente</a>
</li>

abbiamo anche aggiunto la classe nav-link al link nuovo utente, che però ora non funzionerà perchè è assente il metodo newUser() nel componente nav.

Per risolvere al volo, aggiungiamo in app.component un evento (onNewUser) che richiama il metodo newUser()

<app-nav (onNewUser)="newUser()"></app-nav>

Creiamo l’evento onNewUser nel componente nav come evento di @Output

@Output() onNewUser = new EventEmitter();

Infine mettiamo il metodo newUser() anche nel nav.component che lancierà emit() sulla classe onNewUser in @Output e ascoltata dal padre app.component

export class NavComponent {
@Output() onNewUser = new EventEmitter();

 newUser() {
  this.onNewUser.emit();
 }
}

Ricapitolando: Il click sul link Nuovo Utente lancierà il metodo newUser() presente nella classe nav.component, il quale lancerà emetterà l’evento sulla classe di uscita onNewUser che sarà ascoltato dal genitore app.component e richiamerà il suo newUser() che reinizializza l’utente.

Ora sistemiamo la parte del hamburger menu che attualmente non funziona perchè richiede jQuery. Una soluzione sarebbe quella di includere la libreria jQuery nella direttiva scripts del file angular-cli.json, ma la buona pratica insegna che se vogliamo utilizzare angular dovremmo evitare scripts che modifichino direttamente il DOM. La soluzione migliore è quella di installare il componente ng-bootstrap seguendo la documentazione

ng add @ng-bootstrap/ng-bootstrap

Se non viene importato direttamente, importare NgbModule in app.module.ts

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

a questo punto dovremmo essere pronti per sistemare il nostro menu mobile, nel tag <button> aggiungiamo un evento (clic) che lancia il metodo toggleMenu()

<button class="navbar-toggler" type="button" data-toggle="collapse" (click)="toggleMenu()" data-target="#navbarCollapse">

adesso nel <div> #navbarCollapse aggiungiamo la direttiva [ngClass] che aggiunge una classe a seconda del parametro passato

<div class="collapse navbar-collapse" id="navbarCollapse" [ngClass]="'show'">

Da notare che la classe di default di boostrap ‘show‘ l’ho passata tra apici per indicare che è una stringa. Ora il nostro menu sarà aperto di default, dinamiciazziamolo con una variabile e il costrutto if-else nel format ternario

[ngClass]="showMenu?'show':'hide'"

aggiungiamo la variabile nella classe inizializzandola a true se vogliamo che il menù sia aperto all’inizio o false se vogliamo che sia chiuso

showMenu = false;

aggiungiamo il metodo toggleMenu() che cambia il valore della variabile showmenu uguale al contrario dell’attuale valore di showMenu con l’operatore NOT !

toggleMenu() {
 this.showMenu = !this.showMenu;
}

Esiste un secondo metodo che è quello di utilizzare la direttiva [ngbCollapse] presente in ng-bootstrap

(click) ="isCollapsed=!isCollapsed"
[ngCollapse] = 'isCollapsed'
isCollapsed=false;