CODEWITHSUNDEEP
javascriptangularjsng-classdisable
CodBoy
CodBoy

Reputation: 21

Using ng-class to remove in Angular

I'm using ng-class to add a disabled class to a CTA in certain scenarios, but there is a split second delay before it gets applied, which means if the user is quick enough they can click the CTA. See code below:

 <div ng-class="{'disabled-class': !testFunction(name)}">

If I was to change it to the below, obviously I can use JQuery / Vanilla JS to remove the class when needed, but is there a way to do something similar in Angular?

<div class="disabled-class">

Upvotes: 1

Views: 58

Answers (2)

Naren Murali
Naren Murali

Reputation: 56600

The best solution to your problem is to write the code so that true is always returned until the actual value is set.

someFlag: boolean;

testFunction(name: string) {
  if(typeof this.someFlag !== undefined) {
    return this.someFlag;
  }
  return false;
}

Try applying it by default, and the ng-class will remove it based on the condition.

<div class="disabled-class" ng-class="{'disabled-class': !testFunction(name)}">

Upvotes: 0

Eliseo
Eliseo

Reputation: 57939

Why not use the "opposite"? a kind of [class.enable-class]="testFunction(name)"?.

BTW you should not use a function in .html instead of, each change of "name"

(If it is a Input use a setter)

_name!:string
enabled:boolean=False;
Input('name') set _(value:string){
    this._name=value;
    this.enabled=this.testFunction(value)
}
get name()
{
   _return this._name;
}

else you can use also a setter

_name!:string
enabled:boolean=False;
set name(value:string){
    this._name=value;
    this.enabled=this.testFunction(value)
}
get name()
{
   _return this._name;
}

Or, use the new signal

  //use if variable
  name:WritableSignal<string>= signal(0);

  //use if is an input
  name=input<string>("");

  enabled:Signal<boolean>=computed(() => 
    this.testFunction(this.name())
  );

  testFunction(name:string):boolean
  {
    return name=="Angular"
  }

stackblitz using input as signal

Upvotes: 0

Related Questions