Table example.component.ts
@Component({
selector: 'app-table-example',
templateUrl: './table-example.component.html',
styleUrls: ['./table-example.component.css'],
standalone: true,
imports: [
MatTableModule,
FormsModule,
MatInputModule,
MatIconModule,
MatButtonModule,
MatProgressSpinnerModule,
NgIf,
],
})
export class TableExampleComponent implements OnInit {
query: string = '';
loading: boolean = false;
searchResult: GitHubSearchResult = {
items: [],
};
columns = [
{
columnDef: 'full_name',
header: 'Name',
cell: (element: GitHub) => `${element.full_name}`,
},
{
columnDef: 'html_url',
header: 'URL',
cell: (element: GitHub) => `${element.html_url}`,
},
{
columnDef: 'license.name',
header: 'License',
cell: (element: GitHub) => `${element.license?.name}`,
},
{
columnDef: 'watchers_count',
header: 'Watchers',
cell: (element: GitHub) => `${element.watchers_count}`,
},
];
displayedColumns = this.columns.map((c) => c.columnDef);
constructor(private gitHubApiService: GitHubApiService) {}
ngOnInit() {}
search(): void {
this.loading = true;
this.gitHubApiService
.get(this.query, 0, 10)
.pipe(take(1))
.subscribe({
next: (data) => {
this.searchResult = data;
},
complete: () => {
this.loading = false;
},
});
}
}