angular - Can't bind to 'disabled' since it isn't a known property of 'li'

Question

I added [disabled] property to li element. But I get this error:

Can't bind to 'disabled' since it isn't a known property of 'li'.

This is my code part:

<li [disabled]="pager.currentPage > 1">
</li>

Can anyone help me?

question from:https://stackoverflow.com/questions/41241135/cant-bind-to-disabled-since-it-isnt-a-known-property-of-li

Answer 1

The <li> element doesn't have a disabled property.
Either a component or directive that you expect to be applied to <li was actually not applied, or perhaps the disabled attribute should be set instead of the property

<li [attr.disabled]="pager.currentPage > 1 ? true : null">

null is to get the attribute removed in case the condition is false. A boolean false would lead to

<li disabled="false">

which might not what you want. With null you get

<li>