Github example
This example showcase usage of Generic UI grid with Github API. Typing anything in the input field and the grid will display repositories with the used search phrase. The grid source
is directly connected with the Github search API. The grid columns
are configured in a way so they can display attributes of the searched repository: name of a repository, its description, used coding language, repository owner, number of stars and forks. The source code of this example can be found at the bottom of this page.
Source code
This the source code of the Github example. The search API is used in search()
function. The items
variable is reflects as a grid's source. The field attribute found in the columns
configuration, reflects the values of Github repositories.
<div class="gw-example-github">
<form [formGroup]="searchForm">
<label>
<input gui-input type="text" placeholder="Type here..." formControlName="query" value="Tetris">
</label>
<button gui-button type="submit" (click)="submit()">Search</button>
</form>
<div class="result-count">
Showing {{items.length}} out of {{total_count}} results.
</div>
<gui-grid
[loading]="fetching"
[columns]="columns"
[source]="items"
[sorting]="true"
[maxHeight]="700"
infoPanel]="true">
</gui-grid>
</div>
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { GuiColumn, GuiDataType } from '@generic-ui/ngx-grid';
@Component({
templateUrl: './example-github-grid.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleGithubGridComponent implements OnInit {
total_count;
items = [];
columns: Array<GuiColumn> = [{
header: 'Full name',
field: 'full_name',
type: GuiDataType.STRING
}, {
header: 'Description',
field: 'description',
type: GuiDataType.STRING
}, {
header: 'Language',
field: 'language',
type: GuiDataType.STRING
}, {
header: 'Owner',
field: (item: any) => item.owner.login,
type: GuiDataType.STRING
}, {
header: 'Stars',
field: 'stargazers_count',
type: GuiDataType.NUMBER,
width: 100
}, {
header: 'Forks',
field: 'forks',
type: GuiDataType.NUMBER,
width: 100
}];
searchForm: FormGroup;
fetching = false;
constructor(private http: HttpClient,
private formBuilder: FormBuilder,
private changeDetectorRef: ChangeDetectorRef) {
}
ngOnInit() {
this.searchForm = this.formBuilder.group({
'query': ['Tetris', [Validators.required]]
});
this.search();
}
submit(): void {
this.search();
}
search(): void {
if (this.fetching) {
return;
}
this.fetching = true;
this.http
.get('https://api.github.com/search/repositories?per_page=100&q=' + this.searchForm.value.query)
.subscribe((response: any) => {
this.total_count = response.total_count;
this.items = response.items;
this.fetching = false;
this.changeDetectorRef.detectChanges();
});
}
}