is there any alternative for ng-disabled in angular2?

Question

I am using angular2 for development and was wondering if there is any alternative for ng-disabled in angular2.

For ex. below code is in angularJS:

<button ng-disabled="!nextLibAvailable" ng-click="showNext('library')" class=" btn btn-info btn-xs" title="Next Lib >> {{libraries.name}}">
    <i class="fa fa-chevron-right fa-fw"></i>
</button>

Just wanted to know How can I achieve this functionality? any inputs?

Answer 1

To set the disabled property to true or false use

<button [disabled]="!nextLibAvailable" (click)="showNext('library')" class=" btn btn-info btn-xs" title="Next Lib"> {{libraries.name}}">
    <i class="fa fa-chevron-right fa-fw"></i>
</button>

Answer 2

[attr.disabled]="valid == true ? true : null"

You have to use null to remove attr from html element.

Answer 3

For angular 4+ versions you can try

<input [readonly]="true" type="date" name="date" />

Answer 4

Here is a solution am using with anular 6.

[readonly]="DateRelatedObject.bool_DatesEdit ? true : false"

plus above given answer

[attr.disabled]="valid == true ? true : null"

did't work for me plus be aware of using null cause it's expecting bool.

Answer 5

Yes You can either set [disabled]= "true" or if it is an radio button or checkbox then you can simply use disable

For radio button:

<md-radio-button disabled>Select color</md-radio-button>

For dropdown:

<ng-select (selected)="someFunction($event)" [disabled]="true"></ng-select>