เตรียมใช้งาน Template driven forms ใน Angular เบื้องต้น

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

@Component({
  moduleId: module.id,
  selector: 'staff-form',
  templateUrl: `./staff-form.component.html`,
  styleUrls:  ['./staff-form.component.css']
})
export class StaffFormComponent  { 
  
}

<div class="container">
<h2>Angurlar Form</h2>
</div>

div.container{
    margin: auto;
    width: 600px;
    background: #CCC;
}

`./staff-form.component.html`
['./staff-form.component.css']

moduleId: module.id,

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

@Component({
  selector: 'my-app',
  template: `<staff-form></staff-form>`,
})
export class AppComponent  { 

}

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

import { AppComponent }  from './app.component';
import { UserComponent }  from './components/user.component';
import { StaffFormComponent }  from './components/staff-form.component';

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

import { FormsModule }   from '@angular/forms';

import { StaffFormComponent }  from './components/staff-form.component';