<button [disabled]=”isLoading$ | async”>

@Directive({
  selector: 'button[my-button]'
  host: {
    '[disabled]': '(isLoading$ | async)'
  }
})
export class MyButtonDirective {

import {TuiDestroyService, watch} from '@taiga-ui/cdk';
import {Language, TUI_LANGUAGE} from '@taiga-ui/i18n';
import {Observable} from 'rxjs';
import {map, takeUntil} from 'rxjs/operators';
@Component({
   selector: 'my-comp',
   template: '',
   providers: [TuiDestroyService],
})
export class MyComponent {
   @HostBinding('attr.aria-label')
   label = '';
   constructor(
       @Inject(TUI_LANGUAGE) language$: Observable<Language>,
       @Inject(TuiDestroyService) destroy$: Observable<void>,
       @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,
   ) {
       language$.pipe(
           map(getTranslation('label')),
           watch(changeDetectorRef),
           takeUntil(destroy$),
       ).subscribe();
   }
}

@HostBinding('attr.aria-label')
readonly label$ = this.translations.get$('label');

@HostBinding('$.aria-label.attr')
@HostListener('$.aria-label.attr')
readonly label$ = this.translations.get$('label');

addEventListener(element: HTMLElement, event: string): Function {
   element[event] = EMPTY;
   const method = this.getMethod(element, event);
   const sub = this.manager
       .getZone()
       .onStable.pipe(
           take(1),
           switchMap(() => element[event]),
       )
       .subscribe(method);
   return () => sub.unsubscribe();
}

function asCallable<T>(a: T): T & Function {
    return a as any;
}

@HostBinding('$.aria-label.attr')
@HostListener('$.aria-label.attr')
readonly label$ = asCallable(this.translations.get$('label'));

export const TOKEN = new InjectionToken<Observable<boolean>>("");
export const PROVIDER = {
  provide: TOKEN,
  deps: [ElementRef, IntersectionObserverService],
  useFactory: factory,
}
export function factory(
  { nativeElement }: ElementRef,
  entries$: Observable<IntersectionObserverEntry[]>
): Observable<boolean> {
  return nativeElement["$.class.stuck"] = entries$.pipe(map(isIntersecting));
}

@Directive({
  selector: "table[sticky]",
  providers: [
    IntersectionObserverService,
    PROVIDER,
  ],
  host: {
    "($.class.stuck)": "stuck$"
  }
})
export class StickyDirective {
  constructor(@Inject(TOKEN) readonly stuck$: Observable<boolean>) {}
}

private getMethod(element: HTMLElement, event: string): Function {
   const [, key, value, unit = ''] = event.split('.');
   if (event.endsWith('.attr')) {
       return v => element.setAttribute(key, String(v));
   }
   if (key === 'class') {
       return v => element.classList.toggle(value, !!v);
   }
   if (key === 'style') {
       return v => element.style.setProperty(value, `${v}${unit}`);
   }
   return v => (element[key] = v);
}

{
    provide: EVENT_MANAGER_PLUGINS,
    useClass: BindEventPlugin,
    multi: true,
}