Button lose class style after label update with after primeng 9.1.0

[Rotzbua]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)

Bug with Primeng 9.1.2 and angular 10:
https://stackblitz.com/edit/github-qbkr34?file=src%2Fapp%2Fapp.component.html

Bug with Primeng 9.1.3 and angular 9:
https://stackblitz.com/edit/github-f3ydbw?file=package.json

Work with Primeng 9.1.0 and angular 9:
https://stackblitz.com/edit/github-f3ydbw-vsqqg3?file=package.json

Current behavior

If label changed dynamically, the style by class is lost.

Just with angular 10 observed, not with 9. I'm not sure if this is an error of Angular or Primeng.

Expected behavior

No style change on update.

Minimal reproduction of the problem with instructions

Use dynamic label update:
´<button pButton [label]="counter.toString()">´

What is the motivation / use case for changing the behavior?

Works without problems with Angular 9.
Works without problems with primeng 9.1.0.

Please tell us about your environment:

• Angular version: 10.0.2

• PrimeNG version: 9.1.2

• Browser: Chrome Firefox

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version = 12

[soroushNeshat]

i have same issue with PrimeNG version: 9.1.2 and Angular version: 9.1.11

[alixdehghani]

I have same issue ... PrimeNG version: 9.1.2 and Angular version: 9.1

[KevinKoorani]

I have this problem too. There is a simple solution, but the PrimeNG team does not apply it

[mjfard]

PrimeNG team! Please do some thing about this!

[Rotzbua]

@ALL Thanks for feedback. Updated bug description. Primeng 9.1.0 seems the latest version without this bug.

[soroushNeshat]

@Rotzbua yes extactly. this bug exists since primeng v9.1.1 .

this bug was created in this commit: dbe0bd8

    setStyleClass() {
        let styleClass = this.getStyleClass();
        this.el.nativeElement.className = styleClass; // => this line of code overrides all initial css classes
    }

[soroushNeshat]

a possible soultion is to hold initial css classes in a private field like this :

    ngAfterViewInit() {
        this._initialStyleClass = this.el.nativeElement.className;
        ....
    }

    private _initialStyleClass : string; // introduce a new field to hold the initial css classes

    setStyleClass() {
        let styleClass = this.getStyleClass();
        this.el.nativeElement.className = styleClass + this._initialStyleClass;
    }

[cagataycivici]

@yigitfindikli We should add it to 9.x LTS as well.

[ryann3588]

This is still an issue when using [ngClass] [class.class-name] bindings with buttons. If you dynamically change the text of the button which also triggers a class change, the dynamic class gets overridden.

On prime 11.

[EnasDiab]

Still have it with primeng 12 angular 12 when using [ngClass] , any solution ?

[cyberavisror]

I found workaround for this scenario, try to add method that calculates the classes instead of ngClass and use cornerStyleClass input to inject them.

it's bad practice, but it works :)