CODEWITHSUNDEEP
javascriptcssangular
adamb
adamb

Reputation: 833

How to disable anchor with CSS using Angular?

I'm creating 3 buttons, which should be clickable in order. So after clicking the first, the second should become active. Inspecting the elements my logic works, but the CSS is not changing. I'm new to Angular, what am I doing wrong here:

CSS:

.disabled {
  cursor: not-allowed;
  color: red;
}

HTML:

<div style="text-align:center">
  <div>
    <h6>TAG</h6>
    <a class="btn btn-info" (click)="setPackageClickable($event)">TAG FELISMERESE</a>
  </div>
  <div>
    <h6>CSOMAG</h6>
    <a class="btn btn-info" ngClass="{ disabled: {{this.packageClickable}} }" (click)="setpaletteClickable($event)">CSOMAG FELISMERESE</a>
  </div>
  <div>
    <h6>paletteA</h6>
    <a class="btn btn-info" ngClass="{ disabled: {{this.paletteClickable}} }">PALETTA FELISMERESE</a>
  </div>
</div>

MODULE:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pairing-dashboard',
  templateUrl: './pairing-dashboard.component.html',
  styleUrls: ['./pairing-dashboard.component.scss']
})
export class PairingDashboardComponent implements OnInit {
  packageClickable: boolean;
  paletteClickable: boolean;
  setPackageClickable(event) {
    this.packageClickable = false;
  }
  setpaletteClickable(event) {
    this.paletteClickable = false;
  }
  constructor() {
    this.packageClickable = true;
    this.paletteClickable = true;
  }

  ngOnInit() {
  }

}

Upvotes: 0

Views: 54

Answers (3)

crystalthinker
crystalthinker

Reputation: 1182

you need to use [ngClass] instead of ngClass here, and you dont need this

[ngClass]="{ 'disabled': packageClickable }" and 


[ngClass]="{ 'disabled': paletteClickable }"

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

Do not use this. in html:

Use 

 [ngClass]="{'disabled': packageClickable}"

OR 

[class.disabled]="packageClickable"

Upvotes: 0

Oleksandr Martyniuk
Oleksandr Martyniuk

Reputation: 448

Doc

Should be:

<div style="text-align:center">
  <div>
    <h6>TAG</h6>
    <a class="btn btn-info" (click)="setPackageClickable($event)">TAG FELISMERESE</a>
  </div>
  <div>
    <h6>CSOMAG</h6>
    <a class="btn btn-info" [ngClass]="{'disabled': packageClickable}" (click)="setpaletteClickable($event)">CSOMAG FELISMERESE</a>
  </div>
  <div>
    <h6>paletteA</h6>
    <a class="btn btn-info" [ngClass]="{'disabled': paletteClickable}">PALETTA FELISMERESE</a>
  </div>
</div>

or you can make it simpler like this

[class.disabled]="packageClickable"

Upvotes: 2

Related Questions