Angular 2 plus - Membuat Komponen

ng2plus-membuat-komponen.md

Dalam contoh ini kita membuat komponen/halaman about

1. Buat file typescript baru about.component.ts

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

@Component({
  selector: 'about',
  templateUrl: 'app/pages/about/about.html',
  styleUrls:  ['app/pages/about/about.css']
})
export class AboutComponent { }

2. Buat file html about.html

<div class="starter-template">
    <h1>About</h1>
    <p class="lead">This is about page.</p>
</div>

3. Buat file css about.css

h1{
    color: green;
}

4. Daftarkan komponen di NgModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AboutComponent } from './pages/about/about.component';

@NgModule({
  imports: [
    BrowserModule,
  ],
  declarations: [
    AppComponent,
    AboutComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Membuat Komponen Menggunakan CLI

ng generate component my-new-component
atau:
ng g component my-new-component # using the alias
atau:
ng g component feature/new-cmp  // membuat component didalam folder (contoh feature)

Resources :
https://github.com/angular/angular-cli