2) Angular : 3 Must Component file

component need at least this 3 component file

1. customers.component.ts

import { Component, OnInit } from '@angular/core';

@Component ({

selector: 'app-customers',

templateUrl:'./customers.component.html'

})

export class CustomersComponent implements OnInit{

title: string;

people: any[];

constructor(){}

ngOnInit() {

this.title = 'Customers';

this.people = [

{ id: 1, name: 'john Doe', city: 'Phoenix', orderTotal: 9.99, customerSince: new Date(2014, 7, 10) },

{ id: 2, name: 'Jane Doe', city: 'Chandler', orderTotal: 19.99, customerSince: new Date(2017, 2, 22)},

{ id: 3, name: 'Michelle Thomas', city: 'Seattle', orderTotal: 99.99, customerSince: new Date(2002, 10, 31)},

{ id: 4, name: 'Jim Thomas', city: 'New York', orderTotal: 599.99, customerSince: new Date(2002, 10, 31)},

];

}

}

2. customers.module.ts - membolehkan selector dirender pada html

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { CustomersComponent } from './customers.component';

@NgModule({

imports: [ CommonModule ],

declarations: [ CustomersComponent ],

exports: [ CustomersComponent ] // buang bootstrap dan ganti dengan ini

})

export class CustomersModule { }

3. costumers.component.html - tempat keluar render

<h1> {{ title }}</h1>

<br>

Customers Go here

1) Angular : App Component Ts

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-root',

template: `

<h1>{{ title }}</h1>

`

})

export class AppComponent implements OnInit {

title: string;

constructor() { }

ngOnInit() {

// We call a service that gets us the data

this.title = 'Hello World';

}

}