Add multiple values to disabled attribute in Angular

Question

I am trying to add values to a disabled directive. So if you look at the code below I am disabling a button if a value matches System Admin. I am now trying to add more values to this. So I want to add System Admin and HR Manager to this.

[disabled]="userRole === 'System Admin'"

I tried this but it does not seem to work

[disabled]="userRole === 'System Admin' || 'HR Manager'"

Hope it will work if you add parentheses [disabled]="(userRole === 'System Admin' || 'HR Manager')" — Denuka
– Denuka, Commented May 10, 2019 at 10:32

Rohit Sharma · Accepted Answer · 2019-05-15 08:29:30Z

4

If you have many conditions to check then its better to write a function which will return true or false:

HTML:

[disabled]="isDisabled(userRole)"

Typescript:

isDisabled(userRole:string):boolean {
  if(userRole == "System Admin" || userRole == "HR Manager") {
    return true
  }
  return false
}

edited May 15, 2019 at 8:29

Rohit Sharma

3,3442 gold badges21 silver badges39 bronze badges

answered May 10, 2019 at 10:37

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yash Rami Over a year ago

NVM, But in this way we are having a performance issues bcs isDisabled is continuously call when ever the change is detected.

Adrita Sharma Over a year ago

@YashRami Since it is in a loop, whenever change is detected, ternary operator condition will also be continuously called. As per my knowledge, calling the function won't create any additional performance issue, it's same even if it is written in view

Prashant Pimpale Over a year ago

@AdritaSharma If you loop over 1000 records then It actually blocks the UI and makes page unresponsive! See demo here

Vahid · Accepted Answer · 2019-05-10 10:33:30Z

1

The reason is that:

userRole === 'System Admin' || 'HR Manager'

means

if (userRole === 'System Admin') return true;
else return 'HR Manager';

So you can use this:

['System Admin','HR Manager'].indexOf(userRole) !== -1

answered May 10, 2019 at 10:33

Vahid

7,7075 gold badges47 silver badges68 bronze badges

Comments

Prashant Pimpale · Accepted Answer · 2019-05-10 11:28:35Z

1

You can't compare one thing with multiple things if that are strings (as per my knowledge), so need to modify the condition like this:

[disabled]="userRole === 'System Admin' || userRole === 'HR Manager'"

The problem with Custom function to disable the control, it calls multiple times (Called even if you click on the control):

So if there are only two values to compare then I would use HTML Code Approach

Stackblitz_Demo

edited May 10, 2019 at 11:28

answered May 10, 2019 at 10:39

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

Comments

Rohit Sharma · Accepted Answer · 2019-05-15 08:36:30Z

1

You can try like this.

[disabled]="(userRole === 'System Admin' || userRole === 'HR Manager') ? true : false"

edited May 15, 2019 at 8:36

Rohit Sharma

3,3442 gold badges21 silver badges39 bronze badges

answered May 10, 2019 at 10:26

Yash Rami

2,3371 gold badge12 silver badges16 bronze badges

Collectives™ on Stack Overflow

Add multiple values to disabled attribute in Angular

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related