Adding List to an Existing Angular CLI Project

In this guide, we will cover how quick and easy it is to add Gui List to your Angular project. We will create a simple todo-list application that will look like that:

Introducing List to the project

First install Generic UI List by typing this in the terminal in your project directory:

npm i @generic-ui/ngx-list @generic-ui/fabric @generic-ui/hermes

This will install all of the needed dependencies.

Creating a list component

Most importantly, you need to add GuiListModule in the app.module.ts file. Also, don't forget to import GuiListModule from @generic-ui/ngx-list.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GuiListModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now that we have added GuiListModule to our project we can move to the next step.

Adding source and template

In order to build list you need to have source and template specified. In app.component.ts create variable named as source and paste the code below:

source = [{
	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'
}];

With our source defined we can now configure template.

<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>

Creating gui-list

Open up the app.component.html and create the <gui-list></gui-list> tag. With template and source specified all we need to do now is to pass source in the <gui-list> selector as inputs:

<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>

Your application should like like this. It is that simple.

Final code

@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: [`./app.component.css`]
})
export class AppComponent {

	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"
    }
]