Membuat Component Angular 2

Pastikan anda telah menyiapkan workspace terlebih dahulu. Untuk memudahkan dapat mengikuti panduan Setup Project Angular 2.

Untuk membuat component pada angular 2 dapat dilakukan dengan sintaks dari angular CLI

ng generate component myform.component

Angular-CLI akan otomatis membuatkan folder component (css, html, spec dan ts). Tag baru app-myform akan otomatis di buatkan dan dapat dilihat pada myform.component.ts

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

@Component({
  selector: 'app-myform',
  templateUrl: './myform.component.html',
  styleUrls: ['./myform.component.css']
})
export class MyformComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Masukkan myform.component ke dalam app.component.html

<h1>
  {{title}}
</h1>
<app-myform></app-myform>

Tambahkan form ke dalam component myform.component.html

<form>
  <input type="text" name="username" placeholder="Username" /><br />
  <input type="password" name="password" placeholder="Password" /><br />
  <button>Login</button>
</form>

Jalankan server dengan perintah

ng serve

Hasilnya: