Size

<form [formGroup]="sizeForm" (keyup)="submitSize(sizeForm.value)">

	<div>
		Width:
		<input gui-input formControlName="gridWidth">
	</div>

	<div>
		Height:
		<input gui-input formControlName="gridHeight">
	</div>

	<gui-button-toggle (changed)="autoResize($event)">
		Auto-Resize
	</gui-button-toggle>

</form>

<gui-grid [columns]="columns"
		  [source]="source"
		  [maxHeight]="height"
		  [width]="width"
		  [autoResizeWidth]="autoResizeWidth">
</gui-grid>

import { Component } from '@angular/core';

import { GuiCellView } from '@generic-ui/ngx-grid';

import { source } from '../../example-players-list/source';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';


@Component({
	selector: 'size-grid',
	templateUrl: 'app.component.html'
})
export class GridComponent {

	sizeForm: FormGroup;

	columns = [{
		header: 'Number',
		field: 'number',
		width: 60
	}, {
		header: 'Name',
		field: 'name',
		view: GuiCellView.ITALIC
	}, {
		header: 'Position',
		field: 'position',
		view: GuiCellView.BOLD
	}, {
		header: 'Team',
		field: 'team'
	}];

	source = source;

	height: number = 500;
	width: number = 1000;

	autoResizeWidth: boolean = false;


	constructor(private formBuilder: FormBuilder) {

		this.sizeForm = formBuilder.group({
			'gridHeight': [[this.height], [Validators.required, Validators.min(500)]],
			'gridWidth': [[this.width], [Validators.required, Validators.min(100)]]
		});

	}

	autoResize(checked): void {
		this.autoResizeWidth = checked;
	}

	submitSize(post): void {
		this.height = post.gridHeight;
		this.width = post.gridWidth;
	}

}

export const source = [{
	name: 'Kobe Bryant',
	number: 8,
	position: 'SG',
	team: 'Los Angeles Lakers'
}, {
	name: 'Tracy McGrady',
	number: 1,
	position: 'SG',
	team: 'Houston Rockets'
}, {
	name: 'Lebron James',
	number: 23,
	position: 'PF',
	team: 'Los Angeles Lakers'
}, {
	name: 'Dwayne Wade',
	number: 3,
	position: 'SG',
	team: 'Miami Heat'
}, {
	name: 'Vince Carter',
	number: 15,
	position: 'SG',
	team: 'Atlanta Hawks'
}, {
	name: 'Charles Barkley',
	number: 34,
	position: 'PF',
	team: 'N/A'
}, {
	name: 'Nikola Jokic',
	number: 15,
	position: 'PF',
	team: 'Denver Nuggets'
}, {
	name: 'Russell Westbrook',
	number: 0,
	position: 'PG',
	team: 'Houston Rockets'
}, {
	name: 'Kevin Durant',
	number: 7,
	position: 'PF',
	team: 'Brooklyn Nets'
}, {
	name: 'James Harden',
	number: 13,
	position: 'PG/SG',
	team: 'Houston Rockets'
}, {
	name: 'Paul George',
	number: 13,
	position: 'SG',
	team: 'Los Angeles Clippers'
}, {
	name: 'Ben Simmons',
	number: 25,
	position: 'PG',
	team: 'Philadelphia 76ers'
}, {
	name: 'Kawhi Leonard',
	number: 2,
	position: 'SG/SF',
	team: 'Los Angeles Clippers'
}, {
	name: 'Joel Embiid',
	number: 21,
	position: 'C',
	team: 'Philadelphia 76ers'
}, {
	name: 'Janis Andetokunmbo',
	number: 34,
	position: 'PF',
	team: 'Milwaukee Bucks'
}, {
	name: 'Stephen Curry',
	number: 30,
	position: 'PG',
	team: 'Golden State Warriors'
}, {
	name: 'Klay Thompson',
	number: 11,
	position: 'SG',
	team: 'Golden State Warriors'
}, {
	name: 'Anthony Davis',
	number: 23,
	position: 'PF',
	team: 'Los Angeles Lakers'
}];