CODEWITHSUNDEEP
htmlangulartypescript
RainOnMe77
RainOnMe77

Reputation: 145

error TS2322: Type 'Event' is not assignable to type 'boolean'

I‘m writing a todolist demo. When ng serve it, it shows an error:

Error: src/app/app.component.html:17:58 - error TS2322: Type 'Event' is not assignable to type 'boolean'.
17  <input class="toggle" type="checkbox" [(ngModule)]="todo.isDone" >
                                                       ~~~~~~~~~~~~~~
18 
19  <label>{{ todo.title }}</label>
   ~~

Also all items not be checked.(even their isDone status is true)

I def an object in app.component.ts.

public todos:{
    id:number,
    title: string,
    isDone: boolean
  }[]=todos

const todos=[
  {
  id:1,
  title:'study',
  isDone:true
},{
  id:2,
  title:'sleep',
  isDone:true
},{
  id:3,
  title:'drink',
  isDone:true
}
]

app.component.html as below.

<li *ngFor="let todo of todos">
                <div class="view">
                    <input class="toggle" type="checkbox" [(ngModule)]="todo.isDone" >
                    <label>{{ todo.title }}</label>
                    <button class="destroy"></button>
                </div>
                <input class="edit" value="Create a TodoMVC template">
            </li>

Can anyone see what I'm doing wrong? thanks!

Upvotes: 12

Views: 29378

Answers (4)

Dylan K
Dylan K

Reputation: 71

This error can also happen in the following situation:

  • you are using CUSTOM_ELEMENTS_SCHEMA in your "outer" module
  • you are binding to a component from another module
  • and you do not have the component to which you are binding as part of the exports from the module declaring the component.

The fix is to export the component from its declaring module.

Upvotes: 0

user2866001
user2866001

Reputation: 69

In my case it was because I had made my own component and it didn't have the output event emitter (visibleChange) defined.

Code sample with emitter highlighted:

export class DialogComponent {
@Input() header = '';
@Input() message = '';

@Input()
get visible(): boolean { return this._visible; }
set visible(value: boolean) {
    this._visible = value;
}
private _visible = false;

@Output() visibleChange = new EventEmitter<boolean>();

@Output() closeDialog = new EventEmitter<void>();

onCloseDialog(): void {
    this.closeDialog.emit();
}

}

Upvotes: 0

anosha_rehan
anosha_rehan

Reputation: 1600

When I got this error, it was because I forgot to import the FormsModule in app.module.ts. So in app.module.ts:

import { FormsModule } from '@angular/forms';
...
imports: [
..,
FormsModule
],

Upvotes: 34

Gaurang Dhorda
Gaurang Dhorda

Reputation: 3387

change you code from <input class="toggle" type="checkbox" [(ngModule)]="todo.isDone" > to this...

<input class="toggle" type="checkbox" [(ngModel)]="todo.isDone" >

Here, ngModule is not recognizing..

Upvotes: 3

Related Questions