fetch_data_components.ts

import { HttpClient } from '@angular/common/http';
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { environment } from '../../environments/environment';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

imports: [
  MatFormFieldModule,
  MatInputModule
]

@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetch-data.component.html',
  styleUrls: ['./fetch-data.component.css']
})
export class FetchDataComponent implements OnInit {
  public Animal?: Animal[];

  constructor(private http: HttpClient) { }

  displayedColumns: string[] = ['Name', 'Breed', 'Species', 'Sex', 'Size', 'Birthday', 'Founded'];
  public dataSource: MatTableDataSource<any> = new MatTableDataSource<Animal>()
  @ViewChild(MatSort) sort!: MatSort;

/*  ngOnInit(): void {
    this.fetchAnimals();
  }

  fetchAnimals(): void {
    this.http.get<Animal[]>(environment.baseUrl + 'api/Animal')
      .subscribe(
        result => {
          this.Animal = result;
        },
        error => {
          console.error(error);
        }
      );
  }*/

  ngOnInit(): void {
    this.http.get<Animal[]>(environment.baseUrl + 'api/Animal')
      .subscribe((data: any) => {
        this.dataSource = new MatTableDataSource<Animal>(data)
      });
  }

  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
  }

  filterCountries(searchTerm: string) {
    this.dataSource.filter = searchTerm.trim().toLocaleLowerCase();
    const filterValue = searchTerm;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  onMatSortChange() {
    this.dataSource.sort = this.sort;
  }
}

interface Animal {
  animalName: string;
  animalBreed: string;
  animalSpecies: string;
  sex: string;
  size: string;
  birthdayDate: Date;
  foundedDate: Date;
}