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">
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
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)}">
testFunction