How to filter Data

Question

hi

I want Load Data should display data on basis of First Value in Dropdown for the first time. Using Angular 17

<mat-form-field class="example-full-width mb-3" appearance="outline">
    <mat-label>Academic Class</mat-label>
  <mat-select matInput formControlName="academicClassId" required>
    @for (item of classList; track item.id) {
      <mat-option [value]="item.id">{{item.name}}</mat-option>
  }
  </mat-select>
</mat-form-field>

public loadData() {
  this.exampleDatabase = new StudentsService(this.htpClient,this._generic);
  this.dataSource = new ExampleDataSource( this.exampleDatabase,this.paginator, this.sort );

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

Thanks

Jithu Thomas · Answer

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: Set the initial value of the academicClassId form control. 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); }); } }

Tuhin Paul · Answer

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