typescript - How can i use fromEvent (Angular rxjs) with multiple Elements?

Question

I have an angular Application with multiple Buttons which have specific IDs. each of them has a click function and I want to track if a user clicked the Button without changing anything in each of the Methods.

example code:

  import { Component, ViewChild, ElementRef } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  
  
  

    @ViewChild('BUTTON_EDIT', {read: ElementRef}) BUTTON_EDIT;
      @ViewChild('BUTTON_ADD', {read: ElementRef}) BUTTON_ADD;
      ele: Element;
      
      ngAfterViewInit(): void {
        let clickStream;
    
        //check which element was pressed and get the id
        //how can i check it?

        clickStream = fromEvent(this.ele, 'clicked');
        var id = this.ele.id;
    
        clickStream.subscribe(event => {
          //send info
        });
      }
    }

This code is not working ? where is the problem ? and what is the error you are getting ? — Abhinav Kumar
this is just an example, i want to know if and how it is possible to do that — Vincent Mach
Unrelated to question, but AFAIK the event must be click: fromEvent(this.ele, 'click') — Michael D

Timothy Timothy · Accepted Answer · 2021-07-08T12:11:53

You can use merge, which

Turn multiple observables into a single observable

ngAfterViewInit(): void {
    merge(
        fromEvent(this.BUTTON_EDIT.nativeElement, 'click'),
        fromEvent(this.BUTTON_ADD.nativeElement, 'click'),
    ).subscribe((event: Event)=> {
      console.log(event.target.id);
    });
  }

There is also an article which explains details https://www.tektutorialshub.com/angular/create-observable-from-event-using-fromevent-in-angular/

For emitted Event there is target property, from where you can get a target, there is a fiddle https://jsfiddle.net/a907jf5g/

Angular approach would be something like:

@Component({
  template: `
    <button (click)="add()">Add</button>
    <button (click)="edit()">Edit</button>
  `,
})
export class MyComponent {
  add() {
    // add clicked
  }

  edit() {
    // edit clicked
  }
}

typescript - How can i use fromEvent (Angular rxjs) with multiple Elements?

2 Answers