In this section, we are going to split our component into multiple files.
- main.ts - where we'll bootstrap our application to load first component.
- app.component.ts - This component contains our page header.
- car-parts.component.ts - This component contains list of car parts.
import {Component} from '@angular/core';
// This is component declarator, we called it metadata.
@Component({
selector: "my-app",
template: `
<h1>{{title}}</h1>
<car-parts></car-parts>
`
})
export class AppComponent{
title = "Ultra Racing" // Example of property
}
- Added "export" in-front of class, so it can be import into main.ts.
- Added custom selector "car-parts", this is to display our car parts using car-parts.component.ts.
import {Component} from '@angular/core';
@Component({
selector: "car-parts", // Display in selector defined in app.component.ts
template: `
<p>There are {{totalCarParts()}} total parts in stock.</p>
<ul>
<!-- carParts in an array object defined in AppComponent Class. -->
<!-- carPart is a local variable. -->
<li *ngFor="let carPart of carParts">
<h2>{{carPart.name | uppercase}}</h2>
<p>{{carPart.description}}</p>
<p *ngIf="carPart.inStock > 0">{{carPart.inStock}} in stock</p>
<p *ngIf="carPart.inStock === 0">Out of stock</p>
</li>
</ul>
`
})
export class CarPartComponent {
carParts = [{
"id":1,
"name":"Super Tires",
"description":"These tires are the very best",
"inStock":5
},
{
"id":2,
"name":"Reinforced shocks",
"description":"Shock made from krytonite",
"inStock":4
},
{
"id":3,
"name":"Padded Seats",
"description":"Super soft scats for a smooth ride.",
"inStock":0
}] // Example of object
totalCarParts(){
let sum = 0;
for (let carPart of this.carParts) {
sum += carPart.inStock;
}
return sum;
}
}
import {NgModule, Component} from '@angular/core';
import {AppComponent} from './app.component';
import {CarPartComponent} from './car-parts.component';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@NgModule ({
imports: [ BrowserModule ], // List down all component will be used.
declarations: [ AppComponent, CarPartComponent], // Import dependencies.
bootstrap: [ AppComponent ] // Indicate first component to launch.
})
class AppModule {}
// Start the application in web browser.
platformBrowserDynamic().bootstrapModule(AppModule);
- Added import AppComponent and CarPartComponent.
- Added CarPartComponent into NgModule's declarations.
Download Car Part Source:
https://github.com/htsiah/angular2-carparts
