CODEWITHSUNDEEP
angularformsangular-reactive-formsangular-componentsng-class
Assaf Tenenvurzell
Assaf Tenenvurzell

Reputation: 96

Angular, ngClass, using function to evaluate element class - performance and best practice approach

Im useing ngClass over button element which get function , code is about:

initiate formGroup and the function

gentrateForm() {
    this._formGroup = this.formBuilder.group({
        remarks: '',
    });
}
    getButtonClasses() {
    const inpulValue = this._formgroup.get('remarks');
    if (inpulValue.value) {
        return `some css classes`;
    } else {
        return `other classes + disabled class`;
    }
}

}

finally ant the component html

<button
 [ngClass]="getButtonClasses()">
Delete
</button>

My questions:

Upvotes: 0

Views: 270

Answers (1)

Anton Marinenko
Anton Marinenko

Reputation: 2992

In my opinion it's better to separate the template and the code. Your case:

<input formControlName="remarks" #remarks/>....

<button
 [ngClass]="{'class1 class2 class3': remarks.value}">
  Delete
</button>

If class is only one, it's easier:

<button
 [class.class1]="remarks.value">
  Delete
</button>

Upvotes: 1

Related Questions