Filtering Angular 17

Question

I'm currently coding an Angular 17 app and I am having trouble with filtering. The problem I am having is whenever I select a category to filter the data the filter logic excludes all data. Not sure why exactly but nothing I try seems to fix it.

Filter.component.ts

import { Component,Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-filter',
  standalone: true,
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {
  @Output() filterApplied: EventEmitter<any> = new EventEmitter<any>();
  categories = {
    Document: false,
    DocumentSection: false,
    Playbook: false,
    Project: false,
    Conclusion: false,
    Op: false,
    Plan: false,
    // Add more categories here
  };

  sortBy: string = 'title';

   // Function to handle filtering logic
    applyFilters(type= " ") {
    // Implement filtering logic based on selected categories, types, and sorting option
    this.filterApplied.emit({categories: type, sortBy:this.sortBy});
  }
}

Filter.component.html

<section class="filter">
    <h3>Filter Templates</h3>
    <div class="sort-by">
        <h3>Sort By</h3>
        <select>
        <option value="title">Title</option>
        <option value="created_by">Created By</option>
        <option value="mostPopular">Most Popular</option>
        </select>
    </div>
    <div class="filter-category">
        <h3>Filter by Category</h3>
        <label><input type="checkbox"(click)="applyFilters('document')"> Document</label>
        <label><input type="checkbox"(click)="applyFilters('documentSection')"> Document Section</label>
        <label><input type="checkbox"(click)="applyFilters('playbook')"> Playbook</label>
        <label><input type="checkbox" (click)="applyFilters('project')"> Project</label>
        <label><input type="checkbox"(click)="applyFilters('conclusion')"> Conclusion</label>
        <label><input type="checkbox"(click)="applyFilters('op')"> Op</label>
        <label><input type="checkbox"(click)="applyFilters('plan')"> Plan</label>
    </div>
</section>

FilterData Logic

import { Component, inject } from '@angular/core';
import { TemplateComponent } from '../template-market/template-market.component';
import { CommonModule } from "@angular/common";
import { Templates} from '../../templates';
import { TemplateService } from '../../Services/template.service';
import { FilterComponent } from '../filter/filter.component';


@Component({
    selector: 'app-home',
    standalone: true,
    imports:[
        CommonModule,
        TemplateComponent,
        FilterComponent
    ],
    templateUrl: './home.component.html',
    styleUrl:'./home.component.css'
})

export class HomeComponent{
    templateList: Templates[] =[];
    filteredTemplateList: Templates[] =[];
    templateService: TemplateService = inject(TemplateService);
    filteredCategories:any;
    filteredSortBy!:string;

    constructor(){
        this.templateService.getAllTemplates().then((templateList: Templates[])=>{
            this.templateList = templateList;
            this.filteredTemplateList = templateList;
        });
    }

    applyFilter(event:any){
        console.log('Selected categories:', event.categories); 
        this.filteredCategories = event.categories;
        this.filteredSortBy = event.sortBy;
        this.filterData();
    }

    filterData() {
        // Create a copy of the original templateList to avoid modifying it directly
        this.filteredTemplateList = [...this.templateList];
    
        // Filter based on selected categories
        this.filteredTemplateList = this.filteredTemplateList.filter(Template => {
            // Check if the template belongs to any selected category
            for (const category in this.filteredCategories) {
                if (this.filteredCategories[category] && Template.template_type.includes(category)) {
                    console.log('Matched template:', Template);
                    return true;
                }
            }
            return false; // Exclude the template if it doesn't belong to any selected category
        });
    
        // Sort the filtered list based on selected sorting option
        switch (this.filteredSortBy) {
            case 'title':
                this.filteredTemplateList.sort((a, b) => a.title.localeCompare(b.title));
                break;
            case 'created_by':
                this.filteredTemplateList.sort((a, b) => a.created_by.name.localeCompare(b.created_by.name));
                break;
            case 'mostPopular':
                // You need to implement logic to sort by popularity (e.g., review count & rating)
                break;
            default:
                // Default sorting option, no sorting needed
                break;
        }
    }
    
    
}