List Overview

Generic UI List component is in the early access phase.

Eat healthy breakfast7:30 AM
Clean the house10:00 AM
Have Lunch with Mark1:30 PM
Go to the movie theatre9:00 PM
list.component.ts
list.component.scss
data.ts
@Component({
	template: `
		<gui-list class="todo-list" [source]="source">
			<gui-list-item>
				<ng-template let-item="item">
					<span class="gui-list-item-color"></span>
					<span class="gui-list-item-title">{{item.title}}</span>
					<span class="gui-list-item-time">{{item.time}}</span>
				</ng-template>
			</gui-list-item>
		</gui-list>
	`,
	styleUrls: [`./list.component.css`]
})
export class ToDoListComponent {

	source = data;

}
.todo-list .gui-list-item-color {
	border-radius: 50%;
	background: green;
	display: inline-block;
	margin-right: 8px;
	height: 8px;
	width: 8px;
}

.todo-list .gui-list-item-title {
	font-size: 16px;
	display: inline-block;
}

.todo-list .gui-list-item-time {
	margin-left: auto;
	color: #666;
	font-size: 14px;
	display: inline-block;
}

.todo-list .gui-list-item div {
	display: flex;
	align-items: center;
}

.todo-list .gui-list-item {
	margin-bottom: 12px;
}
[
    {
        "time": "7:30 AM",
        "title": "Eat healthy breakfast",
        "status": "green"
    },
    {
        "time": "10:00 AM",
        "title": "Clean the house",
        "status": "green"
    },
    {
        "time": "1:30 PM",
        "title": "Have Lunch with Mark",
        "status": "red"
    },
    {
        "time": "9:00 PM",
        "title": "Go to the movie theatre",
        "status": "yellow"
    }
]

Advanced

The list component allows us to present data in a more complex way. At the example below you can see an example of a list presenting items as cards. The list component uses Angular template mechanism to render elements.

D
Design layout for the website
Website require small improvements
12:00 - 13:00
M
Meet with customer
Customer has many ideas...
14:00 - 14:30
D
Deploy new version of the system
Production branch is ready
16:00 - 18:00
G
Gather requirements
For new features
After 20:00
list.component.ts
list.component.scss
data.ts
@Component({
	template: `
		<div class="task-container">

			<gui-list
					[source]="source"
					class="task-list">

				<gui-list-item class="'list-item-task'">
					<ng-template let-item="item">

						<div class="task-item"
						[ngClass]="{'task-open': item.status === 'OPEN',
						'task-in-progress': item.status === 'IN PROGRESS',
						'task-closed': item.status === 'CLOSED',
						'task-postponed': item.status === 'POSTPONED'}">

							<div class="task-item-left">

								<div class="task-item-circle">
									<span>{{item.title[0]}}</span>
								</div>

							</div>

							<div class="task-item-info">
								<div class="task-item-title">{{item.title}}</div>
								<div class="task-item-desc">{{item.desc}}</div>
								<div class="task-item-time">{{item.time}}</div>
							</div>

						</div>

					</ng-template>
				</gui-list-item>
			</gui-list>

		</div>
	`,
	styleUrls: [`./list.component.css`]
})
export class AdvancedListComponent {

	source = data;

}
$task-gray: #f5f6fa;

$task-blue-light: #eff6ff;
$task-blue: #5f88fe;
$task-green: #2ae2bd;
$task-yellow: #feb721;
$task-red: #ff7e7d;

.task-container {
	background: #f6f5f4;
	padding: 20px 0;
}

.task-list {
	font-family: Roboto;

	.task-item {
		border-left: 3px solid #333;
		padding: 8px 8px 8px 0;
		display: flex;
	}

	.task-open {
		border-left-color: $task-blue;

		.task-item-circle {
			background: $task-blue;
		}

		.task-item-time {
			color: $task-blue;
		}
	}

	.task-in-progress {
		border-left-color: $task-red;

		.task-item-circle {
			background: $task-red;
		}

		.task-item-time {
			color: $task-red;
		}
	}

	.task-closed {
		border-left-color: $task-yellow;

		.task-item-circle {
			background: $task-yellow;
		}

		.task-item-time {
			color: $task-yellow;
		}
	}

	.task-postponed {
		border-left-color: $task-green;

		.task-item-circle {
			background: $task-green;
		}

		.task-item-time {
			color: $task-green;
		}
	}

	.task-item-left,
	.task-item-info {
		height: 100%;
	}

	.task-item-left {
		width: 72px;
	}

	.task-item-info {
		flex-grow: 1;
	}

	.task-item-circle {
		background-color: $task-blue;
		border-radius: 50%;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		margin: 0 auto;
		height: 42px;
		width: 42px;
	}

	.gui-list-item {
		background: white;
		border-radius: 8px;
		border: 0;
		box-shadow: 0 0 2px rgba(0,0,0, 0.1);
		cursor: pointer;
		margin: 0 auto 12px;
		transition: 0.2s background-color;
		width: 400px;

		.gui-list-item-container {
			padding: 16px 12px;
		}

		.task-item-title {
			color: #333;
			font-size: 17px;
			font-weight: bold;
		}

		.task-item-desc {
			color: #999;
			font-size: 14px;
			margin-top: 10px;
		}

		.task-item-time {
			font-size: 13px;
			font-weight: bold;
			margin-top: 20px;
		}

	}

}
[
    {
        "title": "Design layout for the website",
        "desc": "Website require small improvements",
        "status": "IN PROGRESS",
        "time": "12:00 - 13:00"
    },
    {
        "title": "Meet with customer",
        "desc": "Customer has many ideas...",
        "status": "OPEN",
        "time": "14:00 - 14:30"
    },
    {
        "title": "Deploy new version of the system",
        "desc": "Production branch is ready",
        "status": "CLOSED",
        "time": "16:00 - 18:00"
    },
    {
        "title": "Gather requirements",
        "desc": "For new features",
        "status": "POSTPONED",
        "time": "After 20:00"
    }
]

Paging

When you try to display a larger set of data it may cause some problems. It's hard to present thousands of elements on one screen. In order to do it you may use paging feature of angular list component.



1 - 10 of 35
Mark Ross - Team LeaderGenco Pura Olive Oil Company
Concepción King - CarpenterGlobex Corporation
Vanecia Green - PainterSoylent Corp
Samara Anderson - ElectricianInitech
Maxine Hamilton - SEO ManagerGekko & Co
Dan Lee - DirectorSterling Cooper
Paul Long - Web DeveloperHooli
Madonna Snyder - Product ManagerVehement Capital Partners
Oriole Perkins - Public RelationsMassive Dynamic
Ernest Jordan - CopywriterWonka Industries
Items per page:
10
5
10
25
50
1 - 10 of 35
list.component.ts
list.component.scss
data.ts
@Component({
	template: `
		<gui-list
				[source]="source"
				[paging]="paging"
				class="user-list">

			<gui-list-item >
				<ng-template let-item="item">
					<span class="user-img-wrapper">
						<img [src]="item.avatar" class="user-img"/>
					</span>
					<span class="user-name">{{item.name}} - {{item.position}}</span>
					<span class="user-company">{{item.company}}</span>
				</ng-template>
			</gui-list-item>
		</gui-list>
	`,
	styleUrls: [`./list.component.css`]
})
export class PagingListComponent {

	source = data;

	paging: GuiListPaging = {
	    'enabled': true,
	    'page': 1,
	    'pageSize': 10,
	    'pageSizes': [
	        5,
	        10,
	        25,
	        50
	    ]
	};
	
	}
.user-list {

	.user-img-wrapper {
		width: 30px;
		height: 30px;
		margin-right: 8px;
		display: flex;
	}

	.user-img {
		width: 100%;
		min-height: 100%;
		display: block;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
	}

	.user-name {
		font-size: 16px;
		display: inline-block;
	}

	.user-company {
		margin-left: auto;
		color: #666;
		font-size: 13px;
		display: inline-block;
	}

	.gui-list-item div {
		display: flex;
		align-items: center;
	}

}
[{
	avatar: "assets/users/mable.jpeg"
	company: "Stark Industries"
	name: "Mable Bryant"
	position: "Brand Manager"
},
...]

Paging advanced



1 - 10 of 35
Mark Ross - Team LeaderGenco Pura Olive Oil Company
Concepción King - CarpenterGlobex Corporation
Vanecia Green - PainterSoylent Corp
Samara Anderson - ElectricianInitech
Maxine Hamilton - SEO ManagerGekko & Co
Dan Lee - DirectorSterling Cooper
Paul Long - Web DeveloperHooli
Madonna Snyder - Product ManagerVehement Capital Partners
Oriole Perkins - Public RelationsMassive Dynamic
Ernest Jordan - CopywriterWonka Industries
Items per page:
10
6
10
18
24
1 - 10 of 35
list.component.ts
list.component.scss
data.ts
@Component({
	template: `
		<gui-list
				[source]="source"
				[paging]="paging"
				(pageChanged)="onPageChange($event)"
				(pageSizeChanged)="onPageSizeChange($event)"
				class="user-list">

			<gui-list-item >
				<ng-template let-item="item">
					<span class="user-img-wrapper">
						<img [src]="item.avatar" class="user-img"/>
					</span>
					<span class="user-name">{{item.name}} - {{item.position}}</span>
					<span class="user-company">{{item.company}}</span>
				</ng-template>
			</gui-list-item>
		</gui-list>
	`,
	styleUrls: [`./list.component.css`]
})
export class PagingAdvancedListComponent {

	source = data;

	paging: GuiListPaging = {
	    'enabled': true,
	    'page': 1,
	    'pageSize': 10,
	    'pageSizes': [
	        6,
	        10,
	        18,
	        24
	    ]
	};
	
	onPageChange(page: number) {
		alert('Page changed to: ' + page);
	}

	onPageSizeChange(pageSize: number) {
		alert('Page size changed to: ' + pageSize);
	}
}
.user-list {

	.user-img-wrapper {
		width: 30px;
		height: 30px;
		margin-right: 8px;
		display: flex;
	}

	.user-img {
		width: 100%;
		min-height: 100%;
		display: block;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
	}

	.user-name {
		font-size: 16px;
		display: inline-block;
	}

	.user-company {
		margin-left: auto;
		color: #666;
		font-size: 13px;
		display: inline-block;
	}

	.gui-list-item div {
		display: flex;
		align-items: center;
	}

}
[{
	avatar: "assets/users/mable.jpeg"
	company: "Stark Industries"
	name: "Mable Bryant"
	position: "Brand Manager"
},
...]

Card view

The list component can be used to displayed a list of cards instead of rows.



1 - 9 of 35
Mark Ross
Team Leader
Mobile: (231) 638-1199
Genco Pura Olive Oil Company
Concepción King
Carpenter
Mobile: (490) 696-8066
Globex Corporation
Vanecia Green
Painter
Mobile: (607) 248-2032
Soylent Corp
Samara Anderson
Electrician
Mobile: (423) 564-7972
Initech
Maxine Hamilton
SEO Manager
Mobile: (588) 904-5858
Gekko & Co
Dan Lee
Director
Mobile: (413) 936-2806
Sterling Cooper
Paul Long
Web Developer
Mobile: (612) 436-2728
Hooli
Madonna Snyder
Product Manager
Mobile: (540) 378-7247
Vehement Capital Partners
Oriole Perkins
Public Relations
Mobile: (471) 646-1055
Massive Dynamic
Items per page:
9
9
15
30
90
1 - 9 of 35
list.component.ts
list.component.scss
data.ts
@Component({
	template: `
		<gui-list
			[source]="items"
			[paging]="paging"
			[view]="view"
			class="user-list">

			<gui-list-card>
				<ng-template let-item="item">
		
					<div class="card-user">
		
						<div class="card-user-img-wrapper">
							<img [src]="item.avatar" class="card-user-img"/>
						</div>
					
						<div class="card-user-name">{{item.name}}</div>
						<div class="card-user-name">{{item.position}}</div>
						<div class="card-user-mobile">Mobile: {{item.mobile}}</div>
						<div class="card-user-company">{{item.company}}</div>
					
						</div>
					
				</ng-template>
			</gui-list-card>
		</gui-list>

	`,
	styleUrls: [`./list.component.css`]
})
export class CardListComponent {

	source = data;

	paging: GuiListPaging = {
	    'enabled': true,
	    'page': 1,
	    'pageSize': 9,
	    'pageSizes': [
	        9,
	        15,
	        30,
	        90
	    ]
	};
	
		view: GuiListView = {
	    'active': 1,
	    'selector': false
	};
	
	}
.user-list {

	.gui-list-card-wrapper {
		padding: 0 20px;
	}

	.card-user {
		border-bottom: 1px solid #efefef;

		div {
			margin: 4px auto;
		}

		&:hover {
			border-bottom: 1px solid transparent;
		}
	}

	.card-user-img-wrapper {
		width: 180px;
		height: 180px;
		padding: 12px 20px 12px;
		display: flex;
	}

	.card-user-img {
		width: 100%;
		min-height: 100%;
		display: block;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
	}

	.card-user-name, card-user-mobile {
		font-size: 16px;
	}

	.card-user-company {
		color: #666;
		font-size: 13px;
		margin-bottom: 12px;
	}

}
[{
	avatar: "assets/users/mable.jpeg",
	company: "Stark Industries",
	name: "Mable Bryant",
	position: "Brand Manager",
	mobile: "(491) 579-8873"
},
...]

Card & List view



Card
List
Card
1 - 9 of 35
Mark Ross
Team Leader
Mobile:
Genco Pura Olive Oil Company
Concepción King
Carpenter
Mobile:
Globex Corporation
Vanecia Green
Painter
Mobile:
Soylent Corp
Samara Anderson
Electrician
Mobile:
Initech
Maxine Hamilton
SEO Manager
Mobile:
Gekko & Co
Dan Lee
Director
Mobile:
Sterling Cooper
Paul Long
Web Developer
Mobile:
Hooli
Madonna Snyder
Product Manager
Mobile:
Vehement Capital Partners
Oriole Perkins
Public Relations
Mobile:
Massive Dynamic
Items per page:
9
9
15
30
90
1 - 9 of 35
list.component.ts
list.component.scss
data.ts
@Component({
	template: `
		<gui-list
				[source]="source"
				[paging]="paging"
				[view]="view"
				class="user-list">

			<gui-list-item >
				<ng-template let-item="item">
					<span class="user-img-wrapper">
						<img [src]="item.avatar" class="user-img"/>
					</span>
					<span class="user-name">{{item.name}} - {{item.position}}</span>
					<span class="user-company">{{item.company}}</span>
				</ng-template>
			</gui-list-item>

			<gui-list-card>
				<ng-template let-item="item">
		
					<div class="card-user">
		
						<div class="card-user-img-wrapper">
							<img [src]="item.avatar" class="card-user-img"/>
						</div>
					
						<div class="card-user-name">{{item.name}}</div>
						<div class="card-user-name">{{item.position}}</div>
						<div class="card-user-mobile">Mobile: {{item.mobile}}</div>
						<div class="card-user-company">{{item.company}}</div>
					
						</div>
					
				</ng-template>
			</gui-list-card>
		</gui-list>
	`,
	styleUrls: [`./list.component.css`]
})
export class CardAndListComponent {

	source = data;

	paging: GuiListPaging = {
	    'enabled': true,
	    'page': 1,
	    'pageSize': 9,
	    'pageSizes': [
	        9,
	        15,
	        30,
	        90
	    ]
	};
	
		view: GuiListView = {
	    'active': 1,
	    'selector': true
	};
	
	}
.user-list {

	.user-img-wrapper {
		width: 30px;
		height: 30px;
		margin-right: 8px;
		display: flex;
	}

	.user-img {
		width: 100%;
		min-height: 100%;
		display: block;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
	}

	.user-name {
		font-size: 16px;
		display: inline-block;
	}

	.user-company {
		margin-left: auto;
		color: #666;
		font-size: 13px;
		display: inline-block;
	}

	.gui-list-item div {
		display: flex;
		align-items: center;
	}

}

.user-list {

	.gui-list-card-wrapper {
		padding: 0 20px;
	}

	.card-user {
		border-bottom: 1px solid #efefef;

		div {
			margin: 4px auto;
		}

		&:hover {
			border-bottom: 1px solid transparent;
		}
	}

	.card-user-img-wrapper {
		width: 180px;
		height: 180px;
		padding: 12px 20px 12px;
		display: flex;
	}

	.card-user-img {
		width: 100%;
		min-height: 100%;
		display: block;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
	}

	.card-user-name, card-user-mobile {
		font-size: 16px;
	}

	.card-user-company {
		color: #666;
		font-size: 13px;
		margin-bottom: 12px;
	}

}
[{
	avatar: "assets/users/mable.jpeg",
	company: "Stark Industries",
	name: "Mable Bryant",
	position: "Brand Manager",
	mobile: "(491) 579-8873"
},
...]

Searching



Mark Ross - Team LeaderGenco Pura Olive Oil Company
Concepción King - CarpenterGlobex Corporation
Vanecia Green - PainterSoylent Corp
Samara Anderson - ElectricianInitech
Maxine Hamilton - SEO ManagerGekko & Co
Dan Lee - DirectorSterling Cooper
Paul Long - Web DeveloperHooli
Madonna Snyder - Product ManagerVehement Capital Partners
Oriole Perkins - Public RelationsMassive Dynamic
Ernest Jordan - CopywriterWonka Industries
Mable Bryant - Brand ManagerStark Industries
Isaac Patterson - OfficerDunder Mifflin
Renata Diaz - Program ManagerWayne Enterprises
Bert Peterson - CopywriterBubba Gump
Ed Garza - Media BuyerCyberdyne Systems
Alice Hanson - PlumberACME Corporation
Noah Watson - Office ClerkThe New York Inquirer
Peter Medina - Brand StrategistDuff Beer
Stephen Tucker - Account CollectorOlivia Pope & Associates
Rain Cunningham - SupervisorUmbrella Corporation
Marcia Johnson - Account ExecutiveGenco Pura Olive Oil Company
Herman Peters - Office ClerkThe New York Inquirer
Bert Rodriguez - Brand StrategistDuff Beer
Lara Fox - Program AdministratorOlivia Pope & Associates
Lottie Olson - Human ResourcesSterling Cooper
Citrine Washington - Team LeaderGenco Pura Olive Oil Company
Otto Jacobs - Office ClerkThe New York Inquirer
Philip Olson - Brand StrategistDuff Beer
Jean Medina - OverseerOlivia Pope & Associates
Fantasia Lee - ChiefSterling Cooper
Katharine Dean - Computer ScientistGenco Pura Olive Oil Company
Isabelle Shaw - Office ClerkThe New York Inquirer
Tryphena King - Brand StrategistDuff Beer
Oriana Carter - SQL DeveloperOlivia Pope & Associates
Alex Stewart - Web DesignerSterling Cooper
list.component.ts
list.component.scss
data.ts
@Component({
	template: `
		<gui-list
				[source]="source"
				[fields]="fields"
				[searching]="searching"
				class="user-list">

			<gui-list-item >
				<ng-template let-item="item">
					<span class="user-img-wrapper">
						<img [src]="item.avatar" class="user-img"/>
					</span>
					<span class="user-name">{{item.name}} - {{item.position}}</span>
					<span class="user-company">{{item.company}}</span>
				</ng-template>
			</gui-list-item>
		</gui-list>
	`,
	styleUrls: [`./list.component.css`]
})
export class SearchingListComponent {

	source = data;

	searching: GuiListSearching = {
	    'enabled': true
	};
	
	fields: Array<GuiListField> = [
	    {
	        'field': 'name',
	        type: GuiListFieldType.STRING
	    },
	    {
	        'field': 'position',
	        type: GuiListFieldType.STRING
	    },
	    {
	        'field': 'company',
	        type: GuiListFieldType.STRING
	    }
	];
	
	}
.user-list {

	.user-img-wrapper {
		width: 30px;
		height: 30px;
		margin-right: 8px;
		display: flex;
	}

	.user-img {
		width: 100%;
		min-height: 100%;
		display: block;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
	}

	.user-name {
		font-size: 16px;
		display: inline-block;
	}

	.user-company {
		margin-left: auto;
		color: #666;
		font-size: 13px;
		display: inline-block;
	}

	.gui-list-item div {
		display: flex;
		align-items: center;
	}

}
[{
	avatar: "assets/users/mable.jpeg"
	company: "Stark Industries"
	name: "Mable Bryant"
	position: "Brand Manager"
},
...]

Searching Advanced



There are no items to show.
list.component.ts
list.component.scss
data.ts
@Component({
	template: `
		<gui-list
				[source]="source"
				[fields]="fields"
				[searching]="searching"
				(searchPhraseChanged)="onSearchPhraseChange($event)"
				class="user-list">

			<gui-list-item >
				<ng-template let-item="item">
					<span class="user-img-wrapper">
						<img [src]="item.avatar" class="user-img"/>
					</span>
					<span class="user-name">{{item.name}} - {{item.position}}</span>
					<span class="user-company">{{item.company}}</span>
				</ng-template>
			</gui-list-item>
		</gui-list>
	`,
	styleUrls: [`./list.component.css`]
})
export class SearchingAdvancedListComponent {

	source = data;

	searching: GuiListSearching = {
	    'enabled': true,
	    'phrase': 'Mar',
	    'placeholder': 'Search for user'
	};
	
	fields: Array<GuiListField> = [
	    {
	        'field': 'name',
	        type: GuiListFieldType.STRING
	    },
	    {
	        'field': 'position',
	        type: GuiListFieldType.STRING
	    },
	    {
	        'field': 'company',
	        type: GuiListFieldType.STRING
	    }
	];
	
	onSearchPhraseChange(phrase: string) {
		alert('Search phrase: ' + phrase);
	}
}
.user-list {

	.user-img-wrapper {
		width: 30px;
		height: 30px;
		margin-right: 8px;
		display: flex;
	}

	.user-img {
		width: 100%;
		min-height: 100%;
		display: block;
		border-radius: 50%;
		object-fit: cover;
		object-position: center;
	}

	.user-name {
		font-size: 16px;
		display: inline-block;
	}

	.user-company {
		margin-left: auto;
		color: #666;
		font-size: 13px;
		display: inline-block;
	}

	.gui-list-item div {
		display: flex;
		align-items: center;
	}

}
[{
	avatar: "assets/users/mable.jpeg"
	company: "Stark Industries"
	name: "Mable Bryant"
	position: "Brand Manager"
},
...]








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