ngxtension

Why ngxtension? ✨

📦

Feature Rich

50+ utilities for modern Angular development

🚀

Modern Angular

Built for Angular’s latest features including signals, standalone components, and the new control flow

⚡

Performance

Optimized utilities that leverage Angular’s change detection and signals system

🛠️

Developer Experience

Intuitive APIs that reduce boilerplate and improve code readability

🌳

Tree-shakable

Only import what you need, keeping your bundle size minimal

🔄

Type-safe

Full TypeScript support with excellent type inference

🎯

Focused

Each utility solves a specific problem without unnecessary complexity

📚

Well Documented

Comprehensive documentation with examples and interactive demos

🔌

Extensible

Easy to extend and customize for your specific use cases

What does ngxtension offer? 🚀

Signal Utilities

connectConnect everything to everythingderivedFromcombineLatest with signals supportexplicitEffecteffect with explicit dependenciescreateNotifierthe tick you’re missingsignalSlicetasty sliced state managementtoLazySignaldefer signal’s eager executiontoObservableSignalconvert observable to signalmergeFrommerge multiple signalscomputedPreviousaccess previous signal value

Router Utilities

linkedQueryParambidirectional query parameter bindinginjectQueryParamsinject signal route query paramsinjectParamsinject signal route paramsinjectRouteDatainject data from the current routeinjectRouteFragmentinject route fragment as signalinjectNavigationEndlisten to navigation end events

Injector Utilities

injectLazyLazy inject your lazy servicescreateInjectionTokencool InjectionToken creationinjectDestroydestroy$ you don’t have to unsubinjectNetworktrack the current network stateinjectIsIntersectinglisten when element intersectsinjectLocalStorageinject localStorage as signalinjectTextSelectioninject text selection as signalinjectInputsinject component inputs as signalscreateInjectablecreate injectable services easilyautoEffectautomatic effect management

RxJS Operators

debuglog stream inputs and transformed outputsfilterArrayfilter array emitted by the streamfilterNilfilter out null and undefined valuesmapArraymap array emitted by the streammapSkipUndefinedskip undefined on mappollpoll a stream every “period” millisecondsreduceArrayreduce array emitted by the streamwhenDocumentVisibleemit only when document is visiblederiveLoadingderive loading state from streamstakeLatestFromtake latest value from multiple streams

Forms

ifValidator / ifAsyncValidator

apply sync/async conditional form validation

controlValueAccessorcreate custom form controlscontrolErrorhandle form control errorsformEventsenhanced form event handling

Pipes

repeatPiperepeat pipe for template iterationcall/applycall and apply functions in templates

Effects & Lifecycle

createEffect

standalone version of NgRx ComponentStore Effect

effectOnceIfrun effect once when condition is metrxEffectutility to create a side effect with rxjs

Directives

clickOutsidetrack when clicked outside an elementrepeatextension for an effective NgFor iterationresizetrack element/host resizingTrackById / TrackByProp

efficient iteration with trackby id or prop

Components

hostBindingsignal counterpart of @HostBinding APIsvgSpriteSVG sprite managementGesture

collection of Gestures to bind mouse and touch events

Miscellaneous

createSingletonProxy

lazy create singleton instance of a given class

call/applycall and apply functions safelyintlinternationalization utilitiesmergeHttpContextmerge HTTP context providers

Quick Start 🚀

Install ngxtension

npm install ngxtension
# or
pnpm add ngxtension
# or
yarn add ngxtension

Import and use

Import only what you need. ngxtension is built with tree-shaking in mind.

import { linkedQueryParam, paramToNumber } from 'ngxtension/linked-query-param';
import { derivedFrom } from 'ngxtension/derived-from';

@Component({
  template: `
    <input [(ngModel)]="searchQuery" />

    @for (result of results(); track result.id) {
      <div>{{ result.title }}</div>
    }

    <pagination [(page)]="pageNumber" />
  `,
})
export class MyComponent {
  readonly searchQuery = linkedQueryParam('search');
  readonly pageNumber = linkedQueryParam('page', {
    parse: paramToNumber({ defaultValue: 1 }),
  });

  readonly results = derivedFrom(this.searchQuery, (query) =>
    this.searchService.search(query),
  );
}