Angular EnterpriseAngular Enterprise

Angular Lib: DOM

  • Libraries
  • 22 links
  • 4 min read
Libraries to manipulate the DOM with Angular

These libraries enhance DOM-related functionality in Angular applications, offering solutions for element resizing, element visibility, content scrolling and exporting, and intersection observation.

  • ngx-fullscreen is a simple Angular Directive that implements the browser Fullscreen API. ngx-fullscreen
  • resize-observer is a library for declarative use of Resize Observer API with Angular. It helps to easily observe and respond to changes in the size of an element’s content or border box in a performant way. It is now maintained in the ng-web-apis monorepository. resize-observer
  • intersection-observer is a library for declarative use of Intersection Observer API with Angular. It allows you to register a callback function that is executed whenever an element you wish to monitor enters or exits another element (or the viewport). It is now maintained in the ng-web-apis monorepository. intersection-observer
  • mutation-observer is a library for declarative use of Mutation Observer API with Angular. It allows you to observe an element of the DOM and to be informed of its changes of attributes, for example, title, disabled, text... It is now maintained in the ng-web-apis monorepository. mutation-observer
  • ng-resize-observer is similar to the first library resize-observer above, however this one is less complete. ng-resize-observer
  • angular-resize-event is again a similar library that uses ResizeObserver in order to provide a directive for detecting changes of an element size. angular-resize-event
  • ngx-resize-observer is again similar to the first library. It also allows to monitor changes to DOM elements. ngx-resize-observer
  • ngx-mutation-observer is a bit different since it uses Mutation Observer API to detect changes when the value or the properties change and consequently it will not detect changes when the window is resized if size is set in percentage (ex: width: 50%). ngx-mutation-observer
  • pomber/intersection-observer-debugger is a lightweight debugging tool for IntersectionObserver. It visually displays the root, target, and intersection area whenever an IntersectionObserver is triggered, helping developers understand and troubleshoot observer behavior during development. pomber/intersection-observer-debugger
  • ngx-visibility is a library for monitoring the visibility of elements in the DOM. It uses Intersection Observer API in a more performant way compared to others libraries because it keeps the number of observers to a minimum. ngx-visibility
  • ng-in-viewport is a library similar to ngx-visibility since it also allows to check if an element is within the browser's visual viewport. ng-in-viewport
  • ng-dompurify is a library which extends the default DomSanitizer provided by Angular and includes a DOM purifier feature in order to clean dirty HTML. ng-dompurify
  • ng-event-plugins is a tiny library for optimizing change detection cycles for performance sensitive HTML DOM events such as touchmove, scroll, drag... and also provides a declarative command for preventDefault() and stopPropagation(). ng-event-plugins
  • ng-click-outside is an Angular directive for handling click events outside of an element. This repository is now archived. ng-click-outside
  • ngx-favicon is an Angular service to dynamically update the favicon on an app. ngx-favicon
  • ngx-page-scroll is a small animated scrolling utility for Angular applications which allows you to trigger the scroll after loading, after navigation via the router or on click via a directive. ngx-page-scroll
  • ngx-scroll-to is a library that provides a way to smooth scroll to any element on the page and thus enhance scroll-based features in your app. ngx-scroll-to
  • ngx-ui-scroll is a library that provides a very powerful Angular directive for unlimited bidirectional scrolling over limited viewport. ngx-ui-scroll
  • ng-motion is a library inspired by others frameworks aimed to solve the current limitation of the Angular animation module. Indeed this official module is not very ergonomic and thus often unused. ng-motion
  • ngx-pagevisibility is an Angular directive that implements the Page Visibility API. ngx-pagevisibility
  • nartc/ngx-resize is an Angular directive that provides a simple way to detect and respond to element resize events. It uses the ResizeObserver API to track changes in element dimensions. This repository is now archived. nartc/ngx-resize
  • wnabil/ngx-export-as is an Angular module that allows exporting HTML or table elements to various downloadable file formats, including PNG, PDF, CSV, TXT, Excel, Word, JSON, and XML. It supports different export options and configurations, making it versatile for generating reports or data exports from web applications. wnabil/ngx-export-as

Up next

Learn more about Angular