7-1 Installer Bootstrap via ng-bootstrap
Nous pourrions installer Bootstrap manuellement via npm et ensuite intégrer le SCSS et la JavaScript dans bootstrap.
Il existe cependant une librairie appelée ng-bootstrap qui fait ce travail et présente plusieurs avantages. ng-bootstrap fournit des composants Bootstrap natifs spécialement conçus pour Angular, facilitant l'intégration et l'utilisation avec Angular. La librairie réimplemente les composants Bootstrap (modals, dropdowns, accordions, etc.) en utilisant uniquement Angular et TypeScript.
Installer ng-bootstrap
Dans le dossier de votre projet, exécutez la commande suivante (vous pouvez utiliser l'invite de commande de WebStorm). Répondez Y à la question à savoir si vous voulez procéder.
ng add @ng-bootstrap/ng-bootstrap
ng add est une fonctionnalité de Angular qui permet d'aller un peu plus loin que le simple npm install. La commande fait une pré-configuration de la librairie dans le projet.
Remarquez que la librairie est installée à partir de npm (✔ Installing package), mais aussi:
UPDATE src/styles.scss (154 bytes)
UPDATE tsconfig.app.json (460 bytes)
UPDATE angular.json (3331 bytes)
Changements apportés
Observons les différents changements apportés.
src/styles.scss
/* Importing Bootstrap SCSS file. */
@import 'bootstrap/scss/bootstrap';
Cette ligne importe le SCSS de Bootstrap à partir du dossier node_modules.
tsconfig.app.json
"types": [
"@angular/localize"
]
Cette ligne ajoute les services de localisation (traduction) de Angular, bibliothèque requise par ng-bootstrap.
angular.json
"@angular/localize/init"
De la documentation de Angular:
The @angular/localize package exposes the $localize function in the global namespace, which can be used to tag i18n messages in your code that needs to be translated.
Tester l'installation
Repartez le serveur et vous devriez voir une version légèrement plus esthétique de l'application
