Vai al contenuto
ITEN

ng-bootstrap

Componenti Angular su Bootstrap 5.3, con signals, OnPush e date nel fuso orario giusto.

MITTypeScriptAttivoVersione 5.1.1
RepositoryPacchettoDocumentazione

A cosa serve

Bootstrap dà stile e struttura a un'interfaccia. In Angular, però, menu, finestre e campi dei moduli vanno ancora collegati a mano, e lo stesso lavoro torna in ogni progetto. In ng-bootstrap li abbiamo trasformati in componenti Angular tipizzati: il markup resta quello di Bootstrap 5.3, mentre signals, OnPush e Angular CDK fanno il resto, senza jQuery. La usiamo in Chattoo e nella nostra libreria ng-app, e la pubblichiamo su npm con documentazione ed esempi dal vivo su GitHub Pages. Anche questo sito è fatto con ng-bootstrap.

Pagina iniziale della documentazione di ng-bootstrap: il comando ng add e, a sinistra, i componenti divisi per gruppo.

Installazione

ng add @open-rlb/ng-bootstrap

Esempio

<rlb-card>
  <rlb-card-header>Hello</rlb-card-header>
  <rlb-card-body>
    <button rlb-button color="primary">Click me</button>
  </rlb-card-body>
</rlb-card>

Cosa fa

Componenti per tutta l'interfaccia

Bottoni, card, menu, finestre modali, notifiche, schede, barre laterali, alberi, timeline, palette dei comandi e tema chiaro e scuro. Nella nostra documentazione sono divisi per uso, con esempi dal vivo e API.

Campi dei moduli

Ogni campo va con ngModel e con i form reattivi. Ci sono testo, scelte, date e orari, importi, valutazioni, codici OTP e file da trascinare, e con form fields un modulo intero nasce da una descrizione.

Angular 22, signals e OnPush

Componenti standalone, niente zone.js. I pannelli li posiziona Angular CDK, così nessun contenitore li taglia, e menu, alberi e palette dei comandi si usano anche da tastiera.

Calendario e fusi orari

Mese, settimana o giorno. Gli eventi si creano, si modificano e si spostano trascinandoli, e con @open-rlb/date-tz date e orari restano nel fuso orario scelto.

Tabella dati

Paginazione, ordinamento e filtri per colonna, selezione di più righe, colonne da nascondere, intestazione fissa ed esportazione CSV. I dati non stanno nella tabella: ordinamento e filtri arrivano come richiesta a chi li carica.

Pronta con un comando

ng add installa le dipendenze, registra gli stili, configura i provider e crea un componente di prova. Nel pacchetto mettiamo anche le skill per Claude Code della stessa versione.

Requisiti

  • Angular 22 (dalla 22.0, non ancora la 23)
  • Angular CDK 22
  • Bootstrap 5.3 o successivo
  • @open-rlb/date-tz 3
  • RxJS 7.8
  • bootstrap-icons per le icone predefinite (si possono cambiare)
  • Facoltativi: @ngx-translate/core e @types/bootstrap

Licenza e contributi

Licenza
MIT License
Segnalazioni
https://github.com/open-riolabs/ng-bootstrap/issues

Codice, versioni e segnalazioni stanno su GitHub.

Vai al repository