Quick start

The list component is very easy to use. All you need to do is provide your data to the component and configure the template. That is it, everything else is done by the list library.



Bruce Wayne - Batman
Barry Allen - Flash
Clark Kent - Superman
Diana Prince - Wonder Woman


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

@Component({
	selector: 'gw-docs-list-quick-start',
	template: `
		<gui-list
			[source]="source">
			<gui-list-item>
				<ng-template let-item="item">
					<span>{{item.name}} - {{item.character}}</span>
				</ng-template>
			</gui-list-item>
		</gui-list>
	`
})
export class NgDocsListQuickStartGridComponent {

	source: Array<any> = [{
		index: '1',
		character: 'Batman',
		name: 'Bruce Wayne',
		abilities: 'money'
	}, {
		index: '2',
		character: 'Flash',
		name: 'Barry Allen',
		abilities: 'speed'
	}, {
		index: '3',
		character: 'Superman',
		name: 'Clark Kent',
		abilities: 'invincible'
	}, {
		index: '4',
		character: 'Wonder Woman',
		name: 'Diana Prince',
		abilities: 'superhuman strength'
	}];

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

import { GuiListModule } from '@generic-ui/ngx-list';


@NgModule({
	imports: [
		GuiListModule,
	],
	declarations: [
		QuickStartComponent
	]
})
export class QuickStartModule {
}

Related articles:






We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.