Object List With Services Using Angular

Angular is a platform that makes it easy to build applications with the web. In Angular Architecture, Services are used for reusable data to be shared between components throughout an application. Services are mainly used for HTTP Calls.

Components shouldn’t fetch or save the data directly and they certainly shouldn’t knowingly present the fake data. They should focus on presenting the data and delegate data access to a service.

Here, we are going to use an objects list with services in Angular 5 and will display these entities in a table. Please go through the following steps.

Create New Project

Create a new folder named Angular5-ObjectList and select this folder in Visual Studio Code.

Install Angular 5

Open the terminal window in Visual Studio Code and type the following command.

npm install -g @angular/cli

Create Entity

Create a new folder named "entities" in src\appfolder. In this folder, create a new file named "ngconflocation.entity.ts" that contains the product information as below.

export class NgConfLocation {
id: string;
location: string;
organizer: string;
Image: string;
}

Create Service

Create a new folder named "services" in src\appfolder. In this folder, create a new file named "ngconf.service.ts" as below.

import { Injectable } from '@angular/core';
import { NgConfLocation } from '../entities/ngconflocation.entity';
@Injectable ({
providedIn: 'root'
})
export class NgconfService {
findall(): NgConfLocation [] {
return [
{
id: 'Ng01',
location : 'India',
organizer: 'Dhananjay Kumar',
image: 'ngindia.PNG'
},
{
Id: 'Ng02',
location : 'Poland',
organizer: 'Dariusz Kalbarczyk',
image: 'ngpoland.PNG'
},
{
id: 'Ng03',
location : 'London',
organizer: 'Josh Moont',
image: 'Capture.PNG'
}
];
}
}

Create Component

Create a new file named "app.component.ts" in src\app folder. In this component, we will call the methods in "ngconf service".

import { Component , OnInit} from '@angular/core';
import { NgConfLocation } from './entities/ngconflocation.entity';
import { NgconfService } from './services/ngconf.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngconf: NgConfLocation[];
constructor (private ngconflocService: NgconfService) {
}
ngOnInit() {
this.ngconf = this.ngconflocService.findall();
}
}

Create View

Create a new file, "app.component.html" in src\app folder. In this View, show the values from the component.

<table border="1" align='center'width="50" >
<thead >
<tr>
<th scope="col">NG-ID</th>
<th scope="col">Location</th>
<th scope="col">Organizer</th>
<th scope="col" >Logo </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of ngconf">
<td>{{p.id}}</td>
<td>{{p.location}}</td>
<td>{{p.organizer}}</td>
<td> <img src="assets/images/{{p.image}}" width="150" > </td>
</tr>
<tr>
</tbody>
</table>

Create CSS

th, td {
padding: 15px;
text-align: left;
}
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: rgb(172, 76, 175);
color: white;
}
table {
border-collapse: collapse;
width: 50%;
}
tr:hover {background-color: rgb(100, 123, 136);
}

Add Component to Module

In app.module.ts file in src\app folder, add a new component to the module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgconfService } from './services/ngconf.service';
import {FormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [NgconfService],
bootstrap: [AppComponent]
})
export class AppModule { }

Run Application

In terminal window of Visual Studio Code, type the following command

ng serve --open

The program will open a URL http://localhost:4200/ in the browser.