title: Can't bind to [(ngModel)] since it is not provided by any applicable directives
body: <p>I just started to study Angular and wanted to try to implement 2 way binding.</p>
  <p><em><strong>app.module.ts</strong></em></p>
  <pre class="lang-js prettyprint-override"><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import {FormsModule} from '@angular/forms';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p><em><strong>app.component.ts</strong></em></p>
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    title = 'sample text';
  }
  
  </code></pre>
  <p><em><strong>app.component.html</strong></em></p>
  <pre class="lang-html prettyprint-override"><code>&lt;input type=&quot;text&quot; [(ngModel)]=&quot;title&quot;&gt;
  &lt;p&gt;{{title}}&lt;/p&gt;
  </code></pre>
  <p>This code runs and works as it should, but for some reason in the IDE (I am using WebStorm) I get this error:</p>
  <p><a href="https://i.stack.imgur.com/jI7Rh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jI7Rh.png" alt="enter image description here" /></a></p>
  <p>P.S.
  Yes, I read the topics related to this error, but all the answers say just import FormsModule, and I did it anyway.</p>
  <p>P.P.S
  I noticed that IDE was working fine before running the ng serve command.</p>