ng-bootstrap

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:

  
    
      
        import { Component, signal } from '@angular/core';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-thing',
        
    
      
          template: `...`,
        
    
      
          host: {
        
    
      
            '[style.padding.px]': 'padding()',
        
    
      
            '[class.fw-bold]':    'isBold()',
        
    
      
          },
        
    
      
        })
        
    
      
        export class MyThing {
        
    
      
          padding = signal(0);
        
    
      
          isBold  = signal(false);
        
    
      
        }

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

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import { toSignal } from '@angular/core/rxjs-interop';
        
    
      
        
        
    
      
        @Component({
        
    
      
          host: { '[style.padding.px]': 'tick()' },
        
    
      
        })
        
    
      
        export class MyThing {
        
    
      
          readonly tick = toSignal(this.someService.tick$, { initialValue: 0 });
        
    
      
        }
No special provider is needed. Signals integrate natively with Angular's change detector, in both zone-based and zoneless apps.