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?

[disabled]="!nextLibAvailable" try this might help – mayur May 11 '16 at 10:33 — mayur, May 11 '16 at 10:33

score 304 · Accepted Answer · answered May 11 '16 at 10:50

304

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>

answered May 11 '16 at 10:50

Günter Zöchbauer

623,577
216
2,003
1,567

5

Only works on ` – Nate Anderson Apr 21 '17 at 20:32
4

It works on every element that has a `disabled` property. See also http://stackoverflow.com/questions/35431188/angular – Günter Zöchbauer Apr 22 '17 at 06:48
The disabled attribute is supported by – Jorge Tovar Aug 01 '22 at 18:41

score 78 · Answer 2 · edited Feb 15 '17 at 19:13

78

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

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

edited Feb 15 '17 at 19:13

Nissa

4,636
8
29
37

answered Feb 15 '17 at 18:52

Roger Gusmao

3,788
1
20
17

3

For angular > 2.x this is the correct way using [attr.disabled] – dale Apr 02 '17 at 08:27
15

`attr.` is only required when the element doesn't have a `disabled` property. For elements like buttons and input elements `attr.` is redundant. For elements that don't have a `disabled` property a binding to `attr.disabled` is only meaningful if you address it by CSS to make it look like disabled (mouse pointer, gray colors, ...) – Günter Zöchbauer Apr 22 '17 at 09:39
Yes, this is best way when some of element doesn't have disabled property default. – Viraj Nov 07 '17 at 06:40
You can see a solution [here](https://stackoverflow.com/questions/42658800/how-to-bind-dynamic-data-to-aria-label) - it works with this attribute in your components HTML `[attr.aria-disabled]="myPropReflectingIfDisabled"`. It will add an attribute `aria-disabled="true"` if `myPropReflectingIfDisabled` is `true`. – Netsi1964 Dec 06 '17 at 12:01

score 13 · Answer 3 · answered Oct 13 '18 at 07:35

13

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.

answered Oct 13 '18 at 07:35

Aneeq Azam Khan

992
1
10
23

[readonly]="DateRelatedObject.bool_DatesEdit ? true : false" works with Angular 6+ – Devansh Nov 12 '19 at 04:00

score 5 · Answer 4 · answered Jun 21 '18 at 10:32

5

For angular 4+ versions you can try

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

answered Jun 21 '18 at 10:32

Krishnadas PC

5,981
2
53
54

score 0 · Answer 5 · answered Jan 06 '18 at 10:28

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>

is there any alternative for ng-disabled in angular2?

5 Answers5

Linked

Related