How to filter Data

Sign in to answer this question.

• 

  Tuhin Paul2y agoPosted Jul 31, 2024, 5:05 PM

  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();
      }
    }
  }
  
• 

  Jithu Thomas2y agoPosted Jul 29, 2024, 7:53 AM

  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);
      });
    }
  }