ng-bootstrap HomeBasicAlertFormsFloating labelsInput groupMulti-rangeRangePhone inputSelectRadioCheckboxDatepickerTimepickerDateTime pickerContainersGridCardTab controlRatingBadgeBreadcrumbButton groupButton typeCalendarMarqueeList groupTreeviewTree selectTableClosePaginationPlaceholderSpinnerColor pickerProgress barFor directiveIconOverlaysModalsOffcanvasTooltipToastPopoverDropdownTypeaheadContext menuShellDropdown menu (WC)AdvancedCopyCode snippetPipesTrust-htmlSplit-stringLinifySlugifyWord-countFont-colorHas-propertyToggle buttonsSticky footerAutofocusTrackByAsync HostBindingInstance ofIs interfaceResizableOrdinal numbersMarkdownParallaxPriority navigationScrollspyFile uploadSignature padLazy-loading componentsUser-agentNavigation lockNavigation lock (master/detail)EnterpriseCarouselSchedulerTimelineDockRibbonTile managerDatatablesFile managerQuery builderOTP inputNavbarSplitterAccordionAnimationsSlide up/downFade in/outColor transitionAdditional samplesCollapseFocusTrapDrag-dropTree-select drag-dropQR-code viewerStepperThemingAnchor scrollingSection 1Section 2Section 3Section 4Section 522.13.0

Host Bindings with Signals

This page used to demonstrate provideAsyncHostBindings(), a custom event manager plugin that let you bind host properties to RxJS observables (e.g. ($.style.padding.px)="padding$"). That plugin relied on zone.js's NgZone.onStable, which no longer reflects app stability under provideZonelessChangeDetection(). Modern Angular gives you a built-in solution: bind host properties directly to signals.

Demo — signal-driven host bindings

Hello ng-bootstrap!

Demo — observable-driven host bindings via toSignal()

Driven by an RxJS Observable (tick 0)

How to do it

Declare a signal and call it from the host metadata:

For a value that arrives from an Observable, use toSignal() from @angular/core/rxjs-interop:

No special provider is needed. Signals integrate natively with Angular's change detector, in both zone-based and zoneless apps.