Use Object and Objects List with Services in Angular 6

Create New Project

Create new folder named learnangular5withrealapps and select to this folder in Visual Studio Code

Install Angular 6

Open Terminal windows in Visual Studio Code and type: npm install -g @angular/cli to install Angular 6

Structure of Project

Create Entity

Create new folder, named entities in src\app folder. In this folder, create new TypeScript file, named product.entity.ts contain product information as below:

export class Product {

    id: string;
    name: string;
    photo: string;
    price: number;
    quantity: number;

}

Create Service

Create new folder, named services in src\app folder. In this folder, create new TypeScript file, named product.service.ts as below:

import { Injectable } from '@angular/core';
import { Product } from '../entities/product.entity';

@Injectable()
export class ProductService {

    find(): Product {
        return {
            id: 'p01',
            name: 'name 1',
            photo: 'thumb1.gif',
            price: 20,
            quantity: 3
        };
    }

    findAll(): Product[] {
        return [
            {
                id: 'p01',
                name: 'name 1',
                photo: 'thumb1.gif',
                price: 20,
                quantity: 3
            },
            {
                id: 'p02',
                name: 'name 2',
                photo: 'thumb2.gif',
                price: 12,
                quantity: 6
            },
            {
                id: 'p03',
                name: 'name 3',
                photo: 'thumb3.gif',
                price: 16,
                quantity: 7
            }
        ];
    }

}

Create Component

Create new TypeScript file, named app.component.ts in src\app folder. In this component will call methods in product service

import { Component, OnInit } from '@angular/core';
import { ProductService } from './services/product.service';
import { Product } from './entities/product.entity';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent implements OnInit {

  product: Product;
  products: Product[];

  constructor(
    private productService: ProductService
  ) { }

  ngOnInit() {
    this.product = this.productService.find();
    this.products = this.productService.findAll();
  }

}

Create View

Create new file, named app.component.html in src\app folder. In this view, show values from component

<h3>Product Info</h3>
<table border="1">
    <tr>
        <td>Id</td>
        <td>{{product.id}}</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>{{product.name}}</td>
    </tr>
    <tr>
        <td>Photo</td>
        <td>
            <img src="assets/http://learningprogramming.net/wp-content/uploads/mean_stack/angular/{{product.photo}}" width="50" />
        </td>
    </tr>
    <tr>
        <td>Price</td>
        <td>{{product.price}}</td>
    </tr>
    <tr>
        <td>Quantity</td>
        <td>{{product.quantity}}</td>
    </tr>
</table>

<h3>Products List</h3>
<table border="1">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Photo</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Sub Total</th>
    </tr>
    <tr *ngFor="let p of products">
        <td>{{p.id}}</td>
        <td>{{p.name}}</td>
        <td>
            <img src="assets/http://learningprogramming.net/wp-content/uploads/mean_stack/angular/{{p.photo}}" width="50">
        </td>
        <td>{{p.price}}</td>
        <td>{{p.quantity}}</td>
        <td>{{p.price * p.quantity}}</td>
    </tr>
    <tr>
</table>

Add Component to Module

In app.module.ts file in src\app folder. Add new component to module

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

import { ProductService } from './services/product.service';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [
    ProductService
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Run Application

In Terminal windows in Visual Studio Code and type: ng serve –open, program will open url http://localhost:4200/ on browser

Output

References

I recommend you refer to the books below to learn more about the knowledge in this article:

• Pro Angular 6
• Angular 6 for Enterprise-Ready Web Applications: Deliver production-ready and cloud-scale Angular web apps
• ng-book: The Complete Guide to Angular
• Angular in Action
• Mastering TypeScript – Second Edition
• Pro TypeScript: Application-Scale JavaScript Development