CODEWITHSUNDEEP
htmlangulartypescript
OjamaYellow
OjamaYellow

Reputation: 969

angular 2: disabled not working properly

I have defined a boolean in my typescript called readOnlyMode, so when it's true everything should be disabled. I use [disabled]="readOnlyMode" for all elements in HTML that should be disabled. I am having trouble with custom HTML component which I made by myself. When I use above notation I get error: 

Template parse errors:
Can't bind to 'disabled' since it isn't a known property of 'app-color…, …}

HTML code causing this issue:

<app-color-palette style="position:relative; z-index:2;"
                                     [disabled]="readOnlyMode"
                                     [(selectedColorIndex)]="categoryDefinitionModel.Color">
</app-color-palette>

If I use disabled without brackets, It compiles but it doesn't disable the component.

Upvotes: 0

Views: 3079

Answers (2)

Vega
Vega

Reputation: 28738

[disabled] doesn't come as 'build-in' attribute for components. In order to make it work, you could, for example, add @Input() disabled in property list. And then use [disabled]=disabled on that component elements that you wish to disable.

Upvotes: 1

tommueller
tommueller

Reputation: 2496

disabled is not a default property. You have to specify it in your custom component as:

@Input() disabled: boolean;

And then specify the behaviour in your component what it should look like / do when it is disabled.

Upvotes: 6

Related Questions