fetch_data_components.ts
unknown
plain_text
5 months ago
2.0 kB
0
Indexable
Never
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; }