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