New Angular project

In this guide, we will cover how quick and easy it is to create a new Angular project and add Gui List to the workspace . We will create a list example that will look like that:



Eat healthy breakfast7:30 AM
Clean the house10:00 AM
Have Lunch with Mark1:30 PM
Go to the movie theatre9:00 PM

First, you need to make sure you have node and npm installed on your system. You can check your node version and npm version by typing this in your terminal:

node -v
npm -v

If you do not have the NodeJS platform installed you can do so by following its official guide on nodejs.org.

Installing Angular CLI

Now that you have a node on your system, we can install Angular CLI using the npm package manager:

npm install -g @angular/cli

For more information visit the official angular cli guide.

Creating an Angular CLI project

We start off by generating a new CLI project. Navigate to the folder you wish to place your project and type this in your terminal:

ng new gui-list-cli

When asked about routing and stylesheet you can choose either.

Adding Gui List to the project

Navigate to your project directory with:

cd gui-list-cli

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

This section covers some of the key steps in building a Generic UI list.

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.

Creating simple source and columns variables

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> element. With columns and source specified all we need to do now is to pass them 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.

Eat healthy breakfast7:30 AM
Clean the house10:00 AM
Have Lunch with Mark1:30 PM
Go to the movie theatre9:00 PM

Final code

app.component.ts
app.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: [`./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"
    }
]

Related articles:






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