Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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">
Tags:

2

Answers


  1. 0

    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)}">
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search