I am working on an event page where all events are displayed with a category field. This is how my database structure looks:
category:
- categoryName
events:
- eventName
- category.id (stores the category id)
My goal is to initially display all events and then filter events based on checkbox selections by users. When a checkbox is checked, I want to show only events belonging to that category, and when unchecked, display all events again. I would appreciate any help as I'm new to Angular.
Thank you :)
events.service.ts
categories = null;
subscription;
/** Get Categories */
getEventCategories() {
if (!this.categories) {
this.subscription = this.db
.collection('categories')
.valueChanges({ idField: 'id' })
.subscribe(categories => (this.categories = categories));
}
}
/** Get Category Vise Events */
getCategoryViseEvents(category: string) {
return this.db
.collection('events', ref => ref.where('eventCategory', '==', category))
.valueChanges({ idField: 'id' });
}
event.component.ts
import { Component, OnInit } from '@angular/core';
import { EventsService } from 'src/app/services/events.service';
@Component({
selector: 'app-events-list',
templateUrl: './events-list.component.html',
styleUrls: ['./events-list.component.css']
})
export class EventsListComponent implements OnInit {
events: any;
mobile = false;
loading = true;
constructor(public eventService: EventsService) {}
ngOnInit(): void {
if (window.screen.width === 375) {
// 768px portrait
this.mobile = true;
}
this.eventService.getEventCategories();
this.eventService.getAllEvents().subscribe(ev => {
this.loading = false;
this.events = ev;
})
}
getCategory($event) {
this.loading = true;
if ($event.target.checked) {
this.eventService.getCategoryViseEvents($event.target.id).subscribe(events => {
this.events = events;
this.loading = false;
})
} else {
this.loading = false;
}
}
}
**event.component.html
<input
type="checkbox"
class="custom-control-input"
[id]="category.id"
(change)="getCategory($event)"/>