Duplicate Identifier Error on Angular2 Component Input with Getters and Setters

Question

I have an Angular 2 component that uses the @Input class field decorator as well as getters and setters as follows:

import {Component, Input, Output, EventEmitter,FORM_DIRECTIVES, CORE_DIRECTIVES} from 'angular2/angular2';

@Component({
    selector: 'binding-test3',
    templateUrl: './components/binding-test/binding-test3.html',
    directives: [CORE_DIRECTIVES,FORM_DIRECTIVES]
})

export class BindingTest3 {

    @Input() value: string;
    @Output() valueChange:EventEmitter = new EventEmitter();

    private _value: string;

    get value() {
        console.log('getting value in BindingTest3: ',this._value);
        return this._value;
    }

    set value(value) {
        console.log('setting value in BindingTest3: ',value);
        this._value = value;
        this.valueChange.next(value);
    }
}

The code runs correctly but there are three compiler errors:

app/components/binding-test/binding-test3.ts(15,14): error TS2300: Duplicate identifier 'value'. app/components/binding-test/binding-test3.ts(20,9): error TS2300: Duplicate identifier 'value'. app/components/binding-test/binding-test3.ts(25,9): error TS2300: Duplicate identifier 'value'.

Any ideas on how to solve this?

Mark Rajcok · Accepted Answer · 2016-03-14 17:11:27Z

4

Combine the @Input with the set:

@Input() set value(value:string) { ... }

There is an example of this on the Attribute Directives developer guide page:

@Input() set defaultColor(colorName:string) {...}

edited Mar 14, 2016 at 17:11

answered Dec 10, 2015 at 21:32

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Duplicate Identifier Error on Angular2 Component Input with Getters and Setters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related