how do i use observables to show data in a template?

You could either initialize filteredEvents$ like this:

import { of } from 'rxjs';


public filteredEvents$: Observable<IEvent[]> = of([]);

Or use ? operator in corresponding HTML code

<ng-container *ngIf="(filteredEvents$ | async)?.length; else nodata">