CODEWITHSUNDEEP
javascriptangular
edtung
edtung

Reputation: 27

How to have a condition within a [disabled] attribute?

Is it possible to have a condition within a condition for a [disabled] attribute?

This is my attempt at what I'm trying to do for a button:

[disabled]="(second.checkoutHasSupplies() || !second.confirmed) && (!second.confirmedPickUp || !confirmed)"

I want the button to be disabled:

  1. if second.confirmedPickUp is not confirmed
  2. if confirmed is not confirmed
  3. and then only if second.checkoutHasSupplies() is true, then if second.confirmed is not confirmed

I can get numbers 1 and 2 in the list above working, but I can't seem to figure out how to do number 3. As you can see in my code above, I tried (second.checkoutHasSupples() || !second.confirmed), but that's not working.

Also I'm sure it's clear, but just to clarify, I have the second. in front of some of the code because I'm pulling the data from another component. However the string that's just !confirmed is within this component I'm trying to do this on.

I'm really not sure how to achieve this. Any step-by-step walkthroughs would be appreciated! Thanks!

Upvotes: 0

Views: 1063

Answers (2)

PMO1948
PMO1948

Reputation: 2554

So as Benjamin stated before me, you want your condition to be [disabled]="(second.checkoutHasSupplies() && !second.confirmed) || !second.confirmedPickUp || !confirmed"

However, you should know - it is very bad practice to have a function call in the HTML from a performance point of view - since this is something that will have to run to re-evaluate every time.

If your function is pure, a better solution than calling a function is calling a pipe. If your function is impure, it is better to bind the HTML to a property and have the function call and update the property a different way than binding straight to your HTML

Upvotes: 0

Ben
Ben

Reputation: 636

Your condition should be:

[disabled]="(second.checkoutHasSupplies() && !second.confirmed) || !second.confirmedPickUp || !confirmed"

But maybe your second.checkoutHasSupplies() function returns false when the component is mounted... is there an Ajax call in this function ? You should replace second.checkoutHasSupplies() by a variable like "hasSupplies" and set it to "true" by default, or false, and then update this "hasSupplies" variable when second.checkoutHasSupplies() returns a different value.

Upvotes: 1

Related Questions