RPeraltaJr
6/22/2017 - 6:51 PM

Two-Way Data Binding. (*NOTE: To be able to use 'ngModel', the FormsModule (from @angular/forms) needs to beed added to your imports[] array

Two-Way Data Binding. (*NOTE: To be able to use 'ngModel', the FormsModule (from @angular/forms) needs to beed added to your imports[] array in the AppModule)

tutorials.component.html
content_copyfile_download
<h2>{{title}}</h2>
<input type="text" [(ngModel)]="fname">
<input type="text" [(ngModel)]="lname">
Name: {{fname}} {{lname}}
app.module.ts
content_copyfile_download
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms'; // import Forms Module

// Components
import { AppComponent } from './app.component'; // Root component

@NgModule({
  declarations: [
    AppComponent, // Root component
  ],
  imports: [
    BrowserModule,
    FormsModule // Added Forms Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
05-tutorials.component.ts
content_copyfile_download
import { Component } from '@angular/core';

@Component({
  selector: 'my-tutorials',
  template: './tutorials.component.html',
  styleUrls: ['./tutorials.component.css']
})

export class TutorialsComponent(
  public title: string = "Angular Tutorial";
  public fname;
  public lname;
)