Pass Object List from Component to View in Angular 8

This project will demonstrate how to Pass Object from Component to View in Angular 8

  • Angular8
    • src
      • app
        • entities
          • product.entity.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;
}
<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 product of products">
        <td>{{product.id}}</td>
        <td>{{product.name}}</td>
        <td><img src="assets/images/{{product.photo}}" width="60"></td>
        <td>{{product.price}}</td>
        <td>{{product.quantity}}</td>
        <td>{{product.price * product.quantity}}</td>
    </tr>
    <tr>
</table>
import { Component, OnInit } from '@angular/core';

import { Product } from './entities/product.entity';

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

export class AppComponent implements OnInit {

    products: Product[];

    ngOnInit() {
        this.products = [
            {
                id: 'p01',
                name: 'name 1',
                photo: 'thumb1.gif',
                price: 20,
                quantity: 6
            },
            {
                id: 'p02',
                name: 'name 2',
                photo: 'thumb2.gif',
                price: 12,
                quantity: 3
            },
            {
                id: 'p03',
                name: 'name 3',
                photo: 'thumb3.gif',
                price: 14,
                quantity: 8
            }
        ];
    }

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

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

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

export class AppModule { }

Screenshots