Angular 2 Part 3.1 - Splitting to Two Components (Exporting & Importing)

In part 3, we are going to split our code (Component, HTML, CSS, Model and Mock) into different files. Splitting our code into different file allow our code easy to maintain as well as easy to scale.

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.

Here is app.component.ts.

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.

Here is 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;
  }
}

Here is main.ts.

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.

In this section, I didn't add any new functionality, just split the component into different file.

Download Car Part Source:
https://github.com/htsiah/angular2-carparts