RxJS Kütüphanesinde fromEvent Operator’ının Kullanımı

fromEvent, button tıklanma, combobox açılması, herhangi bir nesnenin üzerine gelme gibi aklınıza gelebilecek event’leri yakalar.

Aşağıda, Angular 11 ile bir örnek gösterelim.

<button #btn type="button">durdur</button>

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { range, timer, defer, of, fromEvent } from "rxjs";
import { ajax } from 'rxjs/ajax'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit, OnInit {
  title = 'RxJs Ktüphanesi';
  subscribe: any;
  @ViewChild("btn") button!: ElementRef
  constructor() {

  }
  ngOnInit(): void {
   }
  ngAfterViewInit(): void {
    fromEvent(this.button.nativeElement, "click").subscribe(data => {
      console.log(data);
    })

   
  }
  stop() {
    this.subscribe.unsubscribe();
  }
}

@ViewChild(“btn”) button!: ElementRef detector ile “btn” buttonumuza erişiyoruz. ngAfterViewInit kullanmamızın sebebi html document yüklendikten sonra bu method çalışır. bundan dolayı da butona erişebiliriz.

Son olarak da buttonumuzu tıkladığımız zaman console’umuza aşağıdaki çıktı gelecektir.