Use Object and Object List with Services in Angular 8

This project will demonstrate how to Create Services in Angular 8

  • Angular8
    • src
      • app
        • entities
          • product.entity.ts
        • services
          • product.service.ts
        • app.component.html
        • app.component.ts
        • app.module.ts
    • assets
      • images
        • thumb1.gif
        • thumb2.gif
        • thumb3.gif
export class Product {

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

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

}
<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/images/{{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/images/{{p.photo}}" width="50">
        </td>
        <td>{{p.price}}</td>
        <td>{{p.quantity}}</td>
        <td>{{p.price * p.quantity}}</td>
    </tr>
    <tr>
</table>
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();
    }

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

import { MathService } from './services/math.service';

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

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

export class AppModule { }

Screenshots