Angular 2 Why can't I use interpolation on attributes marked with @Attribute?

Viewed 1626

I have a component written like so:

@Component({
selector: 'ams-text',
templateUrl: './text.component.html',
styleUrls: ['./text.component.scss']
})
export class TextComponent extends ElementBase<string> {

  constructor(
    @Attribute("name") public name : string,
    @Attribute("label") public label : string,
    ) {}
}

However, if I try and use it like this:

<ams-text name="someName_{{ someNumber }}" label="{{someLabel}}"></ams-text>

Angular2 throws this error:

Template parse errors:  Can't bind to 'label' since it isn't a known property of 'ams-text'.
1. If 'ams-text' is an Angular component and it has 'label' input, then verify that it is part of this module.
2. If 'ams-text' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Now 3 things:

Generally I don't need binding to name or label because they aren't going to change over the lifetime of the component. I might want to initialize them from a variable using interpolation, but while they are on the screen that variable isn't going to change its value. Which is exactly what interpolation buys me.

I'm going to typically initialize these values with static text, and using interpolation on these attributes is rare, but does happen. Again why interpolation makes sense over using @Input as it is cumbersome to use static text with @Inputs.

Finally it has no problem with interpolation in the name attribute. If I remove the interpolation from label attribute it doesn't complain about name and actually works as I expect.

I've tried several variations:

<ams-text name="someName_{{someNumber}}" attr.label="{{someLabel}}"></ams-text>
<ams-text name="someName_{{someNumber}}" attr-label="{{someLabel}}"></ams-text>

Without success.

So why can't I use interpolation in a field declared as an @Attribute on a component? Can I fix it?

2 Answers
Related