Loading

source-loading.component.ts
Example
@Component({
	selector: 'source-loading-grid',
	template: `		
		<gui-grid [columns]="columns"
				  [source]="source"
				  [maxHeight]="500"
				  [loading]="loading"></gui-grid>

	`
})
export class LoadingGridComponent {

	loading = true;

	columns = [
		{
			header: 'Name',
			field: 'name'
		},
		{
			header: 'Type',
			field: 'type'
		},
		{
			header: 'Price',
			field: 'price'
		}
	];

	source = [
		{
			name: 'T-shirt',
			type: 'clothes',
			price: '15$'
		}, {
			name: 'Shoes',
			type: 'footwear',
			price: '100$'
		}, {
			name: 'Shoes #2',
			type: 'footwear',
			price: '200$'
		}, {
			name: 'Shoes #3',
			type: 'footwear',
			price: '400$'
		}, {
			name: 'Ball cap',
			type: 'headgear',
			price: '50$'
		}];

}
Name
Type
Price
T-shirt
clothes
15$
Shoes
footwear
100$
Shoes #2
footwear
200$
Shoes #3
footwear
400$
Ball cap
headgear
50$

Inputs

InputTypeDefaultDescription
loadingbooleanfalse Enables loading aka "In progress" mode.

Related articles: