Pass Object from Component to View in Angular 6

Home » MEAN Stack » Angular 6 » Pass Object from Component to View in Angular 6
18 Aug, 2018 Categories: 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

Add Photo to Project

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

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 Component

Create new TypeScript file, named app.component.ts in src\app folder. In this component, create product object 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 {

  product: Product;

  ngOnInit() {
    this.product = {
      id: 'p01',
      name: 'name 1',
      photo: 'thumb1.gif',
      price: 20,
      quantity: 6
    };
  }

}

Create View

Create new file, named app.component.html in src\app folder. In this view, show product object 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="60"> </td>
    </tr>
    <tr>
        <td>Price</td>
        <td>{{product.price}}</td>
    </tr>
    <tr>
        <td>Quantity</td>
        <td>{{product.quantity}}</td>
    </tr>
    <tr>
        <td>Total</td>
        <td>{{product.price * product.quantity}}</td>
    </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 { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  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:


Tags

Related Posts

Top