Type error when using EventEmitter as observable

Question

I've created a simple column filter component so I can filter on a value in a table. All is working as expected but I have some issues when using proper typing for the event emitter.

The relevant code from the ColumnFilterComponent:

export class ColumnFilterEvent {
  public value: any;
}

@Component({
  selector: 'app-column-filter',
  templateUrl: './column-filter.component.html',
  styleUrls: ['./column-filter.component.scss'],
})
export class ColumnFilterComponent {
  /**
   * Event emitted when the filter changes
   */
  @Output() public readonly filterChange$: EventEmitter<ColumnFilterEvent> =
    new EventEmitter<ColumnFilterEvent>();

  /**
   * Handle item selections
   */
  public onSelectItem(choice: ColumnFilterChoice) {
    this.filterChange$.emit({ value: this.selected });
  }
}

In the component where the ColumnFilterComponent is used I have the following code:

@Component()
export class MyComponent implements AfterViewInit {

  @ViewChild(ColumnFilterComponent) public tbFilter: ColumnFilterComponent;

  public ngAfterViewInit(): void {
    this.refresh();

    // Sorting
    const sort$: Observable<Sort> = this.sort.sortChange.pipe(
      tap(() => {
        this.paginator.pageIndex = 0;
      })
    );

    // Paging
    const page$: EventEmitter<PageEvent> = this.paginator.page;

    // Filtering
    const tbFilter$: EventEmitter<ColumnFilterEvent> = this.tbFilter.filterChange$.pipe(
      tap((event: ColumnFilterEvent) => console.log(event))
    );

    merge(sort$, page$, tbFilter$)
      .pipe(tap(() => this.refresh()))
      .subscribe();
  }
}

Goal is when one of the sort, pagination or filter changes the data is reloaded. However, the above code gives the following error on the const tbFilter$ line:

error TS2740: Type 'Observable<ColumnFilterEvent>' is missing the following properties from type 'EventEmitter<ColumnFilterEvent>': emit, closed, observers, isStopped, and 8 more.

Changing the type to any solves the error but we have a policy against using any.

I've looked at the MatPaginator code and I see no differences. What could be the cause?

Provide your interfaces maybe ?

user17740968
– user17740968

2022-06-09 14:29:05 +00:00
Commented Jun 9, 2022 at 14:29 — user17740968
– user17740968, Commented Jun 9, 2022 at 14:29

Vasileios Kagklis · Accepted Answer · 2022-06-09 19:53:31Z

0

In this snippet of code:

 // Filtering
const tbFilter$: EventEmitter<ColumnFilterEvent> = this.tbFilter.filterChange$.pipe(
   tap((event: ColumnFilterEvent) => console.log(event))
);

you declare tbFilter$ with a type of EventEmitter<ColumnFilterEvent>, but .pipe() is returning an Observable<ColumnFilterEvent>. Hence, you are receiving this error.

Change EventEmitter<ColumnFilterEvent> to Observable<ColumnFilterEvent>, or remove the type completely, et voila. The error should disappear.

answered Jun 9, 2022 at 19:53

Vasileios Kagklis

8261 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kees de Bruin Over a year ago

Will try this Monday when I'm back in the office.

Kees de Bruin Over a year ago

This indeed solved the type error.

Collectives™ on Stack Overflow

Type error when using EventEmitter as observable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related