Cannot assign to read only property 'dataChange' of object '#'

Question

I am trying to use a two way binding in Angular 4. Here is my component code:

@Component({
    selector: 'form-validation',
    templateUrl: './form.validation.template.html',
    encapsulation: ViewEncapsulation.None
})

export class ValidationComponent {

    @Input() data;

    @Output dataChange = new EventEmitter();

    //...

}

But when I try to use it on something like it:

<form-validation [(data)]="data"></form-validation>

I get this error on Chrome's console:

Cannot assign to read only property 'dataChange' of object '#<ValidationComponent>'

The data property is an array of a specific type, but even if I inform this type or inicialize the property the error happens.

Isn't it `@Output()` instead of `@Output`? – Harry Ninh Jul 14 '17 at 00:14 — Harry Ninh, Jul 14 '17 at 00:14
Exactly! Such stupid mistake. Thank you! – fred00 Jul 14 '17 at 13:36 — fred00, Jul 14 '17 at 13:36

score 0 · Answer 1 · answered Nov 30 '20 at 22:22

0

Just to make it clear, the answer below is by harry ninh in a comment above

It should be @Output() instead of @Output

answered Nov 30 '20 at 22:22

M Akin

446
6
18

Cannot assign to read only property 'dataChange' of object '#'

1 Answers1