Comment installer Bootstrap dans Angular ? Les 4 meilleures façons

Qu’est-ce que Bootstrap ?
Bootstrap est un framework frontal open source permettant de créer et de concevoir diverses pages Web réactives. Il comprend plusieurs modèles CSS et JavaScript, des grilles réactives, des composants intégrés, des formulaires, des boutons, des outils de navigation, un carrousel et d’autres interfaces.

Angular est une application Web populaire, un framework open source basé sur un script dactylographié. Angular est un langage indépendant de la plate-forme utilisé sur divers systèmes tels que les ordinateurs de bureau, les mobiles, les ordinateurs portables, etc.

De plus, Angular possède d’innombrables fonctionnalités telles que la haute performance, la vitesse, les frameworks intégrés et les composants. Bootstrap est également compatible avec les frameworks JavaScript, Angular et React. En outre, il dispose d’outils de développement utiles qui aident les développeurs à créer des pages Web avec des conceptions et des modèles créatifs. Vous pouvez sélectionner les modèles préférés et les personnaliser manuellement en ajoutant différents composants.

Avec bootstrap, vous devez être à l’aise avec HTML, CSS et JavaScript pour choisir les meilleurs modèles et conceptions. L’ajout de fonctionnalités supplémentaires au-delà de la conception existante est une tâche facile. Tout ce que vous avez à faire est d’écrire du code, de vérifier les conceptions, d’écrire plus de code et vous êtes prêt à partir. Cela semble assez intéressant, non ? C’est. Suivez le meilleur cours pour apprendre Angular et trouvez les cours pertinents selon vos intérêts.

5 façons d’inclure Bootstrap 4 dans votre projet angulaire
Ici, nous allons apprendre à installer bootstrap dans Angular. Bootstrap vous aide à styliser votre application dans un million de thèmes différents. Vous pouvez ajouter Bootstrap à votre projet Angular de plusieurs manières pour rendre votre projet plus attrayant et excitant à la fois. Visitez le cours de formation au développement Web et apprenez le développement à partir de zéro.

Ici, nous utiliserons Angular CLI 13 pour créer un projet à partir de zéro. Le processus comprend les étapes suivantes. Énumérons-les d’abord.

• Installez Angular CLI 13 sur votre système pour créer un projet
• Installez Bootstrap 4 dans votre projet Angular
• Ajouter bootstrap dans les fichiers du projet
• Étape 1- Installation de Angular cli 13
• La première étape consiste à installer Angular CLI 13 sur votre interface si elle n’est pas installée. Vous devez installer la dernière version de Angular CLI dans une nouvelle et nouvelle interface de ligne de commande.

Exécutez la commande ci-dessous pour l’installer-

$ npm install -g @angular/cli 

Si vous êtes un utilisateur macOS ou Linux, vous devez utiliser sudo devant la commande ci-dessus. Vous pouvez également utiliser l’invite de commande avec accès à l’administrateur pour installer Angular CLI 13 sur votre machine avec une portée globale.

Une fois le processus d’installation terminé, il sera stocké dans l’élimination des services publics ng. Maintenant, créons un projet Angular 13.

Voici le code que vous devez utiliser pour démarrer un projet

$ ng new angular-bootstrap-examples 

Vous rencontrerez des questions auxquelles vous devrez répondre en conséquence. Vous devez sélectionner un format de feuille de style CSS approprié. En effet, nous utiliserons la partie CSS Bootstrap à inclure dans notre projet.

Une fois que vous avez utilisé les commandes ci-dessus, appuyez sur Entrée. Peu de temps après, votre projet sera créé. Il installe tous les fichiers et packages nécessaires à la création de votre projet. Vous recevrez un message.

Maintenant, vous devez entrer dans le dossier racine. Vous pouvez le faire en utilisant la commande suivante.

$ cd angular-bootstrap-examples 

Utilisez la commande ng serve pour servir l’application à l’aide de la commande ci-dessous.

$ ng serve 

Votre application commencera à s’exécuter sur le port 4200 avec l’URL http://localhost:4200/.

Étape 2- Installez Bootstrap 4 dans votre projet Angular 13
Maintenant, nous allons ajouter Bootstrap au projet. Pour cela, vous devez installer Bootstrap dans le projet. Cela peut être fait de plusieurs façons. Voyons comment.

Il existe trois méthodes pour savoir comment installer bootstrap dans Angular.

Ils sont les suivants-

Utilisation de npm pour installer Bootstrap avec la commande-npm install
Installation des fichiers bootstrap pour les ajouter manuellement au dossier src/assets du projet.
Nous utilisons CDN pour obtenir le bootstrap.
Utilisons la première méthode que nous avons énumérée ci-dessus. Ouvrez votre interface de ligne de commande et utilisez le bootstrap command- $ npm install.

Vous trouverez tous les fichiers bootstrap stockés dans le dossier node_modules de votre projet.

Étape 3 – Ajout de Bootstrap 5 à Angular CLI
En dessous, nous avons cinq autres façons d’ajouter bootstrap au projet Angular CLI.

Ajout de bootstrap à l’aide de angular.json
Alors, commençons par notre première méthode pour ajouter bootstrap via le fichier angular.json. Ouvrez le fichier et exécutez les commandes suivantes,

node_modules/bootstrap/dist/css/bootstrap.css in the projects->architect->build->styles array, 
node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array, 
node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array, 

Après avoir exécuté tous les codes ci-dessus, vous trouverez le fichier bootstrap joint à votre projet Angular.

Ajout de bootstrap à l’aide du fichier index.html
Voici la deuxième façon de faire la même tâche. Vous pouvez utiliser les fichiers index.html en extrayant le fichier du fichier node_modules/bootstrap. Vous devez ajouter quelques balises essentielles à votre fichier index.html. Les balises sont les suivantes-

Ajoutez le fichier bootstrap.css sous la section à l’aide de la balise .
Vous pouvez ajouter le jquery en utilisant la balise

@import "~bootstrap/dist/css/bootstrap.css." 

This file replaces all the other styles for which you do not need to add any other files.  

Adding Bootstrap using ngx bootstrap or ng bootstrap

Working with some of the bootstrap’s javascript features can be difficult. This is because it requires jquery and other libraries such as popper.js. Importing all these files could be hectic, right? We have an effortless solution to this problem.  

You can use the ngx bootstrap or the ng bootstrap directly with Angular. It covers all the essential libraries and dependencies. So, here’s what you need to do- 

Install the ng bootstrap library through the npm command 

$ npm install @ng-bootstrap/ng-bootstrap 

Une fois installée, importez la bibliothèque dans le module principal du projet.

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

Ajoutez ensuite le module importé à votre dossier de module racine

Vous pouvez utiliser un large éventail de styles pour le rendre attrayant.

Pour ngx bootstrap, les étapes sont les suivantes :

Ouvrez votre terminal et utilisez la commande ci-dessous pour installer ngx bootstrap sur votre machine.

$ npm install ngx-bootstrap 

Maintenant, vous avez besoin du fichier CSS bootstrap. Vous pouvez l’obtenir en utilisant le CDN

Vous pouvez également installer bootstrap dans le fichier angular-cli.json

"styles": [ 
"../node_modules/bootstrap/dist/css/bootstrap.min.css", 
"styles.css" ], 

Effectuez ensuite les modifications appropriées dans le fichier app.module.ts. Après avoir terminé tout cela, vous êtes prêt à partir.

Ajout de Bootstrap à l’aide de Schematics
Avec l’ajout de la commande ng add dans Angular, les développeurs peuvent désormais ajouter sans effort bootstrap à leur projet Angular sans suivre l’ancienne méthode d’installation de npm.

Les développeurs n’ont plus besoin de dépendre de la commande npm install pour obtenir toutes les dépendances requises dans leur projet.

Voici l’alternative à cette commande. Utilisez l’instruction de commande ci-dessous pour obtenir Bootstrap attaché à votre projet-

$ ng add @ng-bootstrap/schematics 

Conclusion
Ici, nous avons beaucoup discuté de la façon d’installer bootstrap Angular. Angular est la plateforme la plus utilisée pour créer des interfaces utilisateur interactives. Bootstrap est un autre framework frontal largement utilisé avec des millions de styles et de modèles de conception.

Nous avons expliqué les principales manières d’ajouter bootstrap à votre projet Angular. Vous pouvez suivre l’un d’eux pour accomplir votre tâche. Il est simple à utiliser dans votre projet. Vous pouvez ajouter le bootstrap à Angular pour commencer à créer divers projets Angular. Voilà, c’est tout pour cet article.

Consultez également le meilleur cours de KnowledgeHut pour apprendre le cours Angular afin de mettre la main sur Angular et ses propriétés.