Angular 2 - how two-way binding works




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

@Component({
 selector: 'app-hamburgers',
 templateUrl: './app.hamburgers.html'
})
export class HamburgersComponent {
 listFilter: string = '';
 hamburgers: any[] = [
    {
     'name': 'Big Kahuna Burger',
     'imageSrc': 'http://breds-breakfast.com/bigkahuna.jpg'
    }
  ];
}

// app.hamburgers.html
...
<input [(ngModel)]='listFilter' type="text">
...
To memorize that syntax, this is a "Banana in Box" :) [()]

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
// NgModel is a part of FormsModule 
import { FormsModule } from '@angular/forms';

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

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

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