// 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 { }