How to filter Data

The component code with comments.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { StudentsService } from './students.service';
import { GenericService } from './generic.service';
import { ExampleDataSource } from './example-data-source'; // Adjust the import based on your actual path
import { MatPaginator, MatSort } from '@angular/material';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  classList: any[] = []; // Assuming this gets populated from somewhere
  form: FormGroup;
  exampleDatabase: StudentsService;
  dataSource: ExampleDataSource;
  subs: { sink: Subscription | null } = { sink: null };
  paginator: MatPaginator;
  sort: MatSort;

  constructor(
    private fb: FormBuilder,
    private httpClient: HttpClient,
    private _generic: GenericService
  ) {
    this.form = this.fb.group({
      academicClassId: new FormControl('')
    });
  }

  ngOnInit() {
    // Set the initial value to the first item in the classList if available
    if (this.classList.length > 0) {
      const initialValue = this.classList[0].id;
      this.form.controls['academicClassId'].setValue(initialValue);
      this.loadData(initialValue);
    }

    // Subscribe to form changes if needed
    this.subs.sink = this.form.controls['academicClassId'].valueChanges.subscribe(value => {
      this.loadData(value);
    });
  }

  onSelectionChange(event: any) {
    const selectedValue = event.value;
    this.loadData(selectedValue);
  }

  async loadData(academicClassId: any) {
    try {
      this.exampleDatabase = new StudentsService(this.httpClient, this._generic);
      this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator, this.sort);

      // Fetch data
      await this.exampleDatabase.getAllRegisteredStudents(academicClassId, this.paginator.pageIndex, this.paginator.pageSize);

      // Handle pagination
      this.subs.sink = this.paginator.page.subscribe(async () => {
        try {
          await this.exampleDatabase.getAllRegisteredStudents(academicClassId, this.paginator.pageIndex, this.paginator.pageSize);
        } catch (error) {
          this.handleError(error);
        }
      });

      // Handle sorting
      this.subs.sink = this.sort.sortChange.subscribe(async () => {
        try {
          await this.exampleDatabase.getAllRegisteredStudents(academicClassId, this.paginator.pageIndex, this.paginator.pageSize);
        } catch (error) {
          this.handleError(error);
        }
      });

    } catch (error) {
      this.handleError(error);
    }
  }

  private handleError(error: any) {
    console.error('An error occurred:', error); // Log to console or a logging service
    // Display a user-friendly message
    alert('An error occurred while loading data. Please try again later.');
  }

  ngOnDestroy() {
    // Cleanup subscriptions to avoid memory leaks
    if (this.subs.sink) {
      this.subs.sink.unsubscribe();
    }
  }
}

To achieve the functionality where data is loaded based on the first value in the dropdown when the component is initialized, you need to set the initial value of the dropdown and then call the loadData() function accordingly. Here’s how you can do it:

1. Set the initial value of the academicClassId form control.
2. Trigger the loadData() method based on the selected value.

Here is the updated code with these changes:

  Academic Class
  
    {{ item.name }}
  

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { StudentsService } from './students.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  classList: any[] = []; // Assuming this gets populated from somewhere
  form: FormGroup;
  exampleDatabase: StudentsService;
  dataSource: any;
  subs: any = { sink: null };
  paginator: any;
  sort: any;

  constructor(private fb: FormBuilder, private httpClient: HttpClient, private _generic: GenericService) {
    this.form = this.fb.group({
      academicClassId: new FormControl('')
    });
  }

  ngOnInit() {
    // Set the initial value to the first item in the classList if available
    if (this.classList.length > 0) {
      this.form.controls['academicClassId'].setValue(this.classList[0].id);
      this.loadData(this.classList[0].id);
    }

    // Subscribe to form changes if needed
    this.form.controls['academicClassId'].valueChanges.subscribe(value => {
      this.loadData(value);
    });
  }

  onSelectionChange(event: any) {
    const selectedValue = event.value;
    this.loadData(selectedValue);
  }

  loadData(academicClassId: any) {
    this.exampleDatabase = new StudentsService(this.httpClient, this._generic);
    this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator, this.sort);

    this.exampleDatabase.getAllRegisteredStudents(academicClassId, this.paginator.pageIndex, this.paginator.pageSize);

    this.subs.sink = this.paginator.page.subscribe(() => {
      this.exampleDatabase?.getAllRegisteredStudents(academicClassId, this.paginator.pageIndex, this.paginator.pageSize);
    });

    this.subs.sink = this.sort.sortChange.subscribe(() => {
      this.exampleDatabase?.getAllRegisteredStudents(academicClassId, this.paginator.pageIndex, this.paginator.pageSize);
    });
  }
}