[Fixed] Angular error NG8002, error TS2341 (Problem with the html and ts files)

Issue

I have been trying to find the error for 2 hours. Anything seems fine, and it works before i add the [(NgModule)]="toDo$.label". It is also declared at the template-todo-form.component.ts as:

This is the html file -> template-todo-form.component.html

<div class="todo-form">
    <div class="todo-content">
        <input type="text" [(NgModel)]="toDo$.label" placeholder="Was muss erledigt werden?">
    </div>
    <div class="create">
        <span>Erstellen</span>
    </div>
</div>

And this is the Typescript abstract:

import { Component, OnInit } from '@angular/core';
import { ToDo } from '../../_interface/todo';

@Component({
  selector: 'app-template-todo-form',
  templateUrl: './template-todo-form.component.html',
  styleUrls: ['./template-todo-form.component.sass']
})

export class TemplateTodoFormComponent implements OnInit {

    
    private toDo$: ToDo;
    constructor() {
        this.toDo$ = {
            label: undefined,
            status: false
        };
    }

    ngOnInit() {
    }

    // Create new ToDo
}

For your interest -> im working with the gitbash, so i copy&paste the error output.

$ ng serve
- Generating browser application bundles...
 Browser application bundle generation complete.

Initial Chunk Files   | Names         |    Size
main.js               | main          | 0 bytes
polyfills.js          | polyfills     | 0 bytes
runtime.js            | runtime       | 0 bytes
styles.css, styles.js | styles        | 0 bytes
vendor.js             | vendor        | 0 bytes

| Initial Total | 0 bytes

Build at: 2021-03-23T18:10:05.416Z - Hash: 5b02fccf2cebb89bf415 - Time: 8328ms

Error: _template/template-todo-form/template-todo-form.component.html:3:28 - error NG8002: Can't bind to 'NgModel' since it isn't a known property of 'input'.

3         <input type="text" [(NgModel)]="toDo$.label" placeholder="Was muss erledigt werden?">
                             ~~~~~~~~~~~~~~~~~~~~~~~~~

  _template/template-todo-form/template-todo-form.component.ts:6:16
    6   templateUrl: './template-todo-form.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component TemplateTodoFormComponent.


Error: _template/template-todo-form/template-todo-form.component.html:3:41 - error TS2341: Property 'toDo$' is private and only accessible within class 'TemplateTodoFormComponent'.

3         <input type="text" [(NgModel)]="toDo$.label" placeholder="Was muss erledigt werden?">
                                          ~~~~~

  _template/template-todo-form/template-todo-form.component.ts:6:16
    6   templateUrl: './template-todo-form.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component TemplateTodoFormComponent.


Error: _template/template-todo-form/template-todo-form.component.html:3:41 - error TS2341: Property 'toDo$' is private and only accessible within class 'TemplateTodoFormComponent'.

3         <input type="text" [(NgModel)]="toDo$.label" placeholder="Was muss erledigt werden?">
                                          ~~~~~

  _template/template-todo-form/template-todo-form.component.ts:6:16
    6   templateUrl: './template-todo-form.component.html',
    m                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component TemplateTodoFormComponent.




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **



I Hope the information is useful to help me asap... 
Thanks at the front :-) 

Solution

Its lowercase ‘n’ that you need to use.

[(ngModel)] binds the value that you tie it to. So your HTML should look like this:

<input type="text" [(ngModel)]="toDo$.label" placeholder="Was muss erledigt werden?">