How to conditionally enable/disable a table rows on click() in html using css

Question

My code:

component class:

this.locknumbers = true;
onclick(){
this.locknumbers = false;
}

.disabledRows {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: default;
}

[ngClass]= "{'disableRows':locknumber}".

<a  (click)="onClick()"> Enable </a>

Initially it is disabled but when I click on enabled button, the contents are still disabled but in console I can see the value of this. lock numbers changing to false; even though the style class is applied on click.

You have a typo in your template, you wrote locknumber instead of locknumbers. — theberzi
– theberzi, Commented Sep 10, 2021 at 12:12

Polpo · Accepted Answer · 2021-09-10 15:34:59Z

1

There is typo also in css class name disableRows and disabledRows.

If you are using VSCode, checkout extension "Angular Language Service". It can detect variable names in angular components. It doesn't help in the CSS class name part, but it will catch the locknumber variable name and type in the template.

Your code should be fine after typos fixed.

answered Sep 10, 2021 at 15:34

Polpo

856 bronze badges

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

Comments

Regestea · Accepted Answer · 2021-09-10 15:44:09Z

0

why don't you use this code better for the toggle button

this.locknumbers = true;
onclick(){
this.locknumbers = !this.locknumbers
}

answered Sep 10, 2021 at 15:44

Regestea

8821 gold badge19 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to conditionally enable/disable a table rows on click() in html using css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related