Can't bind to 'ngModel' since it isn't a known property of 'input'.

I can't put my finger on what causes this error or how to get around it. In the app I made here I attempted to do something like so in a component:

public whatever: string;
public resetIt():void {
   this.whatever = "meh";
}

 
 

In the markup for the component we have something like so:

<div>
   <input [(ngModel)]="whatever" />
   <div>{{whatever}}</div>
   <button (click)="resetIt()">reset</button>
</div>

 
 

The fallen-out-of-fashion two way data binding of Angular 1 hardly exists in Angular 4, but one way it still rears its head is with an ngModel implementation as shown here. As one types in the input field the copy in the div below it will get updated in real time. Resetting the value of the backing store "whatever" by clicking the button updates what is in the input's value and the div too. This sort of thing really isn't recommended. In the input tag you could instead have one breakout in square brackets for one-way data binding and a separate event in parenthesis for one way eventing (not unlike the click shown above). When you combine the square brackets and the parenthesis you get the banana box syntax of the two way stuff, but this should smell bad to you. You'll want the break out of the two as you'll eventually want to change what one half of what the magic does, either the one-way binding or the event back to the component's code. I regret not being able to beat the error I mention here. I ultimately got around it by just jamming my code into the default implementation of the Angular 4 seed instead of my own component. Whatever.