Pass Objects List from Component to View in Angular 6

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

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

Create new folder images in src\assets folder. Copy photo files to this folder

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 new TypeScript file, named app.component.ts in src\app folder. In this component, create products list to pass view

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

}

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

<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/http://learningprogramming.net/wp-content/uploads/mean_stack/angular/{{product.photo}}" width="60"></td>
        <td>{{product.price}}</td>
        <td>{{product.quantity}}</td>
        <td>{{product.price * product.quantity}}</td>
    </tr>
    <tr>
</table>

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 { AppComponent } from './app.component';

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

export class AppModule { }

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

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

Pass Objects List from Component to View in Angular 6

Create New Project

Install Angular 6

Add Photo to Project

Structure of Project

Create Entity

Create Component

Create View

Add Component to Module

Run Application

Output

References