How to display Object List with Services in Angular 5?

Angular is a platform that makes it easy to build applications with the web.

In Angular Architecture, Services are used for reusable data to share between components throughout an application. Services are mainly used for HTTP Calls.

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

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

Create a New Project

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

Install Angular 

Open Terminal windows in Visual Studio Code and type:

npm install -g @angular/cli

Create an Entity

Create a new folder, named entities in src\appfolder. In this folder, create a new file, named ngconflocation.entity.ts contain 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 the src\app folder. In this component will call 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, named app.component.htmlin src\app folder. In this view, show values from 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> <imgsrc="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 the src\app folder. Add a new component to 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 windows in Visual Studio Code and type:

ng serve --open

the program will open URL http://localhost:4200/on browser