CODEWITHSUNDEEP
htmlcssangular
Ashmita Basu
Ashmita Basu

Reputation: 21

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

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.

Upvotes: 0

Views: 453

Answers (2)

Regestea
Regestea

Reputation: 802

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

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

Upvotes: 0

Polpo
Polpo

Reputation: 85

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.

Upvotes: 1

Related Questions