Angular
Enterprise
./assets/drawing/angular-resources-libraries-dom.svg

Librairies Angular pour manipuler le DOM

Ces bibliothèques améliorent les fonctionnalités liées au DOM dans les applications Angular, offrant respectivement des solutions pour le redimensionnement des éléments, la visibilité des éléments, le défilement et l'exportation du contenu et les fonctionnalités de l'observation des intersections.

  • ngx-fullscreen est une simple directive Anguloar qui implémente l'API Fullscreen du navigateur. ngx-fullscreen
  • resize-observer est une bibliothèque pour une utilisation déclarative de Resize Observer API avec Angular. Il permet d'observer et de réagir facilement aux changements de taille du contenu ou de la zone de bordure d'un élément de manière performante. resize-observer
  • intersection-observer est une bibliothèque pour une utilisation déclarative de Intersection Observer API avec Angular. Il permet d'enregistrer une fonction de rappel qui est exécutée chaque fois qu'un élément qu'ils souhaitent surveiller entre ou sort d'un autre élément (ou de la fenêtre). intersection-observer
  • mutation-observer est une bibliothèque pour une utilisation déclarative de Mutation Observer API avec Angular. Il permet d'observer un élement du DOM et d'être informé de ses changements d'attributs, par exemple, title, disabled, text... mutation-observer
  • ng-resize-observer est similaire à la première bibliothèque resize-observer ci-dessus, mais ce travail n'est toujours pas terminé. ng-resize-observer
  • ngx-resize-observer est à nouveau similaire à la première bibliothèque. Il permet également de surveiller les modifications apportées aux éléments DOM. ngx-resize-observer
  • angular-resize-event est à nouveau une bibliothèque similaire qui utilise le resize-observer afin de fournir une directive pour détecter les changements de taille d'élément. angular-resize-event
  • ngx-mutation-observer est un peu différent car il utilise Mutation Observer API pour détecter les changements lorsque le la valeur ou les propriétés changent et par conséquent, il ne détectera pas les changements lorsque la fenêtre est redimensionnée si la taille est définie en pourcentage (ex: largeur: 50%). ngx-mutation-observer
  • pomber/intersection-observer-debugger Un outil de débogage léger pour IntersectionObserver. Il affiche visuellement la racine, la cible et la zone d'intersection chaque fois qu'un IntersectionObserver est déclenché, aidant ainsi les développeurs à comprendre et à dépanner le comportement des observateurs pendant le développement. pomber/intersection-observer-debugger
  • ngx-visibility est une bibliothèque pour surveiller la visibilité des éléments dans le DOM. Il utilise Intersection Observer API de manière plus performante par rapport aux autres bibliothèques car il maintient le nombre d'observateurs au minimum. ngx-visibility
  • ng-in-viewport est une bibliothèque similaire à ngx-visibility car elle permet également de vérifier si un élément se trouve dans la fenêtre d'affichage du navigateur. ng-in-viewport
  • ng-dompurify est une bibliothèque qui étend le Dom Sanitizer par défaut fourni par Angular et inclut une fonction de purificateur DOM afin de nettoyer le HTML sale. ng-dompurify
  • ng-event-plugins est une petite bibliothèque pour optimiser les cycles de détection des changements pour les événements du DOM HTML sensibles aux performances tels que touchmove, scroll, drag ... et également fournit une commande déclarative pour preventDefault() et stopPropagation(). ng-event-plugins
  • ng-click-outside est une directive Angular pour gérer les événements de clic en dehors d'un élément. ng-click-outside
  • ngx-favicon est un service Angular pour mettre à jour dynamiquement le favicon sur une application. ngx-favicon
  • ngx-page-scroll est un petit utilitaire de défilement animée pour les applications Angular qui permet de déclencher le scroll après le chargement, après une navigation via le router ou bien au click via une directive. ngx-page-scroll
  • ngx-scroll-to est une bibliothèque qui permet de faire défiler en douceur n'importe quel élément de la page et d'améliorer ainsi les fonctionnalités de défilement dans votre application. ngx-scroll-to
  • ngx-ui-scroll est une bibliothèque qui fournit une directive Angular très puissante pour un défilement bidirectionnel illimité sur un viewport limité. ngx-ui-scroll
  • ng-motion est une bibliothèque inspirée d'autres frameworks visant à résoudre la limitation actuelle du module d'animation Angular. En effet ce module officiel est peu ergonomique et donc souvent inutilisé. ng-motion
  • ngx-pagevisibility est une directive Angular qui implémente l'API Page Visibility. ngx-pagevisibility
  • nartc/ngx-resize Une directive Angular qui fournit un moyen simple de détecter et de répondre aux événements de redimensionnement d'élément. Il utilise probablement l'API ResizeObserver pour suivre les modifications des dimensions des éléments. nartc/ngx-resize
  • wnabil/ngx-export-as Un module Angular qui permet d'exporter des éléments HTML ou de tableau vers divers formats de fichiers téléchargeables, notamment PNG, PDF, CSV, TXT, Excel, Word, JSON et XML. Il prend en charge différentes options et configurations d'exportation, ce qui le rend polyvalent pour générer des rapports ou des exportations de données à partir d'applications Web. wnabil/ngx-export-as

En apprendre plus sur Angular

Liste complète des librairies angular utilitaires .