Come integrare Bootstrap in Angular

L'integrazione di Bootstrap in un progetto Angular consente di migliorare rapidamente l'aspetto e la reattività della tua applicazione. Bootstrap fornisce una vasta gamma di componenti già pronti e flessibili che si adattano automaticamente a dispositivi di diverse dimensioni, senza dover scrivere codice CSS da zero. In questa sezione, vedremo come installare e configurare Bootstrap all'interno di un'applicazione Angular.

Installazione di Bootstrap tramite npm

La maniera più semplice e pulita per integrare Bootstrap in Angular è tramite npm, il gestore di pacchetti di Node.js. Questo ti permette di aggiungere Bootstrap come dipendenza al progetto e mantenerlo aggiornato nel tempo.

Esegui il seguente comando per installare sia Bootstrap che Popper.js, una libreria necessaria per il corretto funzionamento di alcuni componenti di Bootstrap (come dropdown e tooltip). Apri quindi il terminale nella cartella del tuo progetto Angular e digita:

npm install bootstrap@5.3.3 popper.js

Questo comando installerà Bootstrap versione 5.3.3 e Popper.js, aggiungendoli alla lista delle dipendenze del tuo progetto.

Configurazione di Bootstrap in Angular

Ora che Bootstrap è stato installato è necessario configurarlo in modo che gli stili e i componenti siano disponibili all'interno dell'applicazione Angular. Dobbiamo allora aggiungere il CSS di Bootstrap per far sì che i suoi stili vengano applicati all'app. Devi quindi importare il file CSS di Bootstrap all'interno del file principale degli stili dell'applicazione Angular. Di solito, quest'ultimo è src/styles.css (o styles.scss se hai scelto SCSS durante la creazione del progetto):

@import 'bootstrap/dist/css/bootstrap.min.css';

Se utilizzi SCSS puoi aggiungere Bootstrap direttamente tramite SCSS:

@import '~bootstrap/scss/bootstrap';

Alcuni componenti di Bootstrap, come tooltip e dropdown, richiedono l'inclusione di Popper.js. Assicurati che sia correttamente installato con Bootstrap. L'importazione di Popper.js è gestita automaticamente tramite npm quindi non è necessario un passaggio separato.

Verificare l'integrazione di Bootstrap

Per verificare che Bootstrap sia stato correttamente integrato puoi aggiungere un semplice componente di Bootstrap all'interno di uno dei file di template Angular. Apri il file src/app/app.component.html e aggiungi un componente di Bootstrap, ad esempio un pulsante associato ad uno stile:

<button class="btn btn-primary">Cliccami</button>

Avvia quindi l'applicazione Angular utilizzando il comando:

ng serve --open

dove <code>--open</code> consente di aprire in automatico il browser.

Una volta avviato il browser all'indirizzo http://localhost:4200/ dovresti vedere il bottone con lo stile di Bootstrap applicato correttamente (blu, in linea con il tema predefinito di Bootstrap),

Uso dei componenti di Bootstrap in Angular

Una volta che Bootstrap è stato integrato puoi iniziare ad utilizzare i componenti che la libreria offre, come griglie, caroselli, navbar, modali e molto altro. Puoi usare le classi CSS di Bootstrap direttamente nei template Angular (ad esempio, nei file HTML dei componenti).

Ecco un esempio di come creare una semplice griglia con le classi di Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="p-3 border bg-light">Colonna 1</div>
    </div>
    <div class="col-md-6">
      <div class="p-3 border bg-light">Colonna 2</div>
    </div>
  </div>
</div>

Puoi semplicemente pulire il componente src/app/app.component.html ed aggiungere il seguente contenuto all'interno del tag main:

<main></main>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="p-3 border bg-light">Colonna 1</div>
    </div>
    <div class="col-md-6">
      <div class="p-3 border bg-light">Colonna 2</div>
    </div>
  </div>
</div>

Il browser refresherà di conseguenza ed il risultato sarà:

Personalizzazione di Bootstrap

Se vuoi personalizzare gli stili di Bootstrap per adattarli meglio al design della tua applicazione puoi farlo utilizzando il file SCSS. Bootstrap fornisce numerose variabili SCSS che puoi sovrascrivere per modificare colori, spaziature e altri aspetti del layout.

Ad esempio, puoi sovrascrivere il colore primario predefinito di Bootstrap creando un file styles.scss e aggiungendo:

$primary: #ff6347; // Un colore arancione per i bottoni
@import '~bootstrap/scss/bootstrap';

Aggiungere una Navbar con Bootstrap

Ora che abbiamo integrato Bootstrap nel nostro progetto Angular possiamo aggiungere una navbar (barra di navigazione) per facilitare la navigazione nell'applicazione. Le navbar di Bootstrap sono flessibili e facili da personalizzare, e permettono di includere collegamenti, dropdown e menu responsivi che si adattano a diversi dispositivi.

Creazione della Navbar di base

Per iniziare, apriamo il file app.component.html e aggiungiamo il codice per una navbar di base fornita da Bootstrap:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">AngularApp</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"></button>
  <div id="navbarNav" class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
      <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
    </ul>
  </div>
</nav>

Questo codice crea una navbar con un brand ("AngularApp") e alcuni collegamenti come Home, Features, Pricing e un link disabilitato. La navbar include anche un pulsante "toggler" che, su dispositivi con schermo piccolo, permette di comprimere i collegamenti in un menu a tendina.

Il codice della Navbar

• Il tag <nav> utilizza le classi navbar, navbar-expand-lg e navbar-light di Bootstrap per creare una barra di navigazione che si espande a partire dalla dimensione dello schermo large e usa dei colori chiari.
• Il marchio (navbar-brand) è il logo o il titolo della tua applicazione.
• Il toggler (navbar-toggler) è il pulsante che appare sui dispositivi mobili per espandere o comprimere la navigazione.
• Il div con classi collapse navbar-collapse e ID navbarNav contiene gli elementi del menu che si nascondono o si mostrano in base alla dimensione dello schermo.
• Gli elementi del menu sono organizzati in un elenco non ordinato con classi navbar-nav e nav-item, mentre ogni collegamento utilizza la classe nav-link per ottenere lo stile predefinito di Bootstrap.

Personalizzazione della Navbar

Puoi personalizzare la navbar per adattarla meglio al design della tua applicazione. Ad esempio, puoi cambiare il colore di sfondo o usare una variante più scura. Per fare ciò, basta modificare le classi Bootstrap già presenti. Per una navbar scura puoi usare il seguente codice:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">AngularApp</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  </button>
  <div id="navbarNav" class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
      <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
    </ul>
  </div>
</nav>

Qui, abbiamo sostituito navbar-light bg-light con navbar-dark bg-dark per ottenere una navbar con colori scuri. Bootstrap fornisce diverse opzioni di stile per personalizzare la barra di navigazione in base al tema dell'applicazione.

Aggiungere Routing alla Navbar

Per rendere la navbar completamente funzionale in Angular, possiamo collegare i suoi pulsanti alle pagine dell'applicazione utilizzando il router di Angular. Prima assicurati che il routing sia configurato correttamente nel progetto. Se non l'hai fatto durante la creazione del progetto, puoi aggiungerlo manualmente. Modifica il file app-routes.ts per configurare il routing delle diverse pagine:

import { Routes } from '@angular/router';
<import { HomeComponent } from './home/home.component';>
<import { FeaturesComponent } from './features/features.component';>
<import { PricingComponent } from './pricing/pricing.component';>
<export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'features', component: FeaturesComponent },
  { path: 'pricing', component: PricingComponent }
];>

Ora puoi aggiornare i link nella navbar per utilizzare i comandi di routing Angular:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"><a class="navbar-brand" href="#">AngularApp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
</button>
<div id="navbarNav" class="collapse navbar-collapse">
<ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>
</div>
</nav>

Creare componenti mancanti

Prima di procedere è chiaro che devi creare i componenti mancanti. Per far questo da terminale digita:

ng generate component home
ng generate component features
ng generate component pricing

oppure nella sua forma abbreviata:

ng g c home
ng g c features
ng g c pricing

Conclusione

In questo capitolo abbiamo completato l'integrazione di Bootstrap in un progetto Angular, esplorato l'installazione di Bootstrap tramite npm, configurato i file CSS e implementato una navbar con collegamenti interattivi. Questa integrazione consente di sfruttare tutta la potenza di Bootstrap migliorando l'aspetto dell'applicazione.