tonivj5 / from-event

🦊 ViewChild and FromEvent — a Match Made in Angular Heaven

ViewChild and FromEvent — a Match Made in Angular Heaven

Turn ViewChild and ContentChild queries into an RxJS stream.

Installation

npm install @ngneat/from-event

Usage

Use the FromEvent decorator with ViewChild or ContentChild. Note that it expects to get ElementRef.

import { FromEvent } from '@ngneat/from-event';

@Component({
  selector: 'my-btn',
  template: `
    <button #button>
      <ng-content></ng-content>
    </button>
  `
})
class ButtonComponent implements AfterViewInit {
  @FromEvent('click')
  @ViewChild('button') 
  click$: Observable<MouseEvent>;

  ngAfterViewInit() {
    this.click$.subscribe(console.log);
  }
}

A common example is using it with switchMap():

import { FromEvent } from '@ngneat/from-event';

@Component({
  selector: 'my-comp',
  template: `
    <button #trigger>Trigger</button>
  `
})
class MyComponent implements AfterViewInit {
  @FromEvent('click')
  @ViewChild('trigger') 
  trigger$: Observable<MouseEvent>;

  ngAfterViewInit() {
    this.trigger$.pipe(switchMap(() => service.doSomething())).subscribe(result => {
      // Do something with the result
    });
  }
}

Use the FromEvents decorator with ViewChildren or ContentChildren. Note that it expects to get ElementRef.

import { FromEvents } from '@ngneat/from-event';

@Component({
  template: `
    <my-btn id="1">Click One</my-btn>
    <my-btn id="2">Click Two</my-btn>
    <my-btn id="3">Click Three</my-btn>
  `
})
class HostComponent implements AfterViewInit, OnDestroy {
  @FromEvents('click')
  @ViewChildren(ButtonComponent, { read: ElementRef }) 
  clicks$: Observable<MouseEvent>;

  ngAfterViewInit() {
    this.clicks$.subscribe(e => console.log(e.target));
  }
}

Have fun, and don't forget to unsubscribe. If you work with Ivy, you can do it with until-destroy.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Netanel Basal 💻

This project follows the all-contributors specification. Contributions of any kind welcome!