Créer une barre de progression à l’aide de Ngx-Bootstrap dans Angular 8


introduction

Dans cet article, nous allons apprendre à créer une barre de progression à l’aide de ngx-bootstrap dans Angular 8.

Ngx-Bootstrap a publié un ensemble d’outils open-source qui sont des directives natives Angular pour Bootstrap 3 et 4. Il contient tous les composants principaux alimentés par Angular. Dans cet article, nous allons en apprendre davantage sur le composant Typehead qui est une fonctionnalité intéressante de Ngx-bootstrap.

Qu’est-ce que la barre de progression?

Une barre de progression est un composant de l’interface graphique qui est utilisé pour visualiser la progression d’une tâche qui est terminée, comme le pourcentage du montant qui est terminé pendant le téléchargement.

Dans la barre de progression Ngx-bootstrap, il y a une barre de progression normale, rayée et rayée avec une bande animée.

Conditions préalables

  • Connaissances de base d’Angular
  • Le code Visual Studio doit être installé
  • La CLI angulaire doit être installée
  • Le nœud JS doit être installé

Étape 1

Créons un nouveau projet angulaire à l’aide de la commande NPM suivante,

Étape 2

Maintenant, créons un nouveau composant en utilisant la commande suivante,

Étape 3

Installez ngx-bootstrap à partir de npm à l’aide de la commande suivante.

Ou,

Étape 4

Ajoutons maintenant des styles d’amorçage dans notre fichier index.html.

Pour Bootstrap 3,

Pour Bootstrap 4,

Étape 5

Ajoutons le modèle dans notre ngx-bootstrap-progressbar.component.html.

Étape 6

Maintenant, ouvrez le fichier ngx-bootstrap-progressbar.component.ts et ajoutez le code suivant dans ce fichier.

Étape 7

Maintenant, ouvrez le fichier app.component.html et ajoutez le code suivant dans le fichier,

Étape 8

Ouvrons le fichier app.module.ts et ajoutons le code suivant dans le fichier,

Il est maintenant temps pour la sortie,

Il s’agit de la barre de progression normale que nous pouvons utiliser avec différentes classes contextuelles supportées par bootstrap: succès, info, avertissement, danger

Il s’agit de la barre de progression rayée qui comporte des lignes rayées pour indiquer la quantité de tâches effectuées.

C’est la progression animée qui semble être en cours.

Bien que nous puissions utiliser ces barres de progression de manière dynamique, nous voulons simplement remplacer le champ de valeur par notre variable dynamique.

Conclusion

Dans cet article, nous avons vu le composant de barre de progression Ngx-Bootstrap dans une application Angular 8.

J’espère que vous avez apprécié cet article, tout comme j’ai apprécié écrire et coder les exemples.

Veuillez me faire savoir comment l’améliorer.

Close Menu