Как поменять значок на кнопке?

Question

Есть кнопка, которая открывает боковое меню. Я хочу изменить значок на кнопку в зависимости от того, открытое меню или нет. То есть если окно активно, то значок на кнопке pi pi-lock в противном случае pi pi-lock-open. Как это сделать?

HTML:

...
<p-button (click)="_toggleOpened()" icon="pi pi-lock"></p-button>
...

ц

  private _opened: boolean = true;
  private _toggleOpened(): void {
    this._opened = !this._opened;
  }

Answer 1

Попробуйте:

HTML:

<p-button (click)="_toggleOpened()" [icon]="icon_val"></p-button>

TS:

icon_val: string="pi pi-lock"
private _opened: boolean = false;

private _toggleOpened(): void {
    this._opened=!this.opened
    if (this._opened)
        this.icon_val="pi pi-lock-open"
    else
        this.icon_val="pi pi-lock"
    }

Answer 2

сделать атрибут значка в качестве привязки свойства и присвоить переменной "pi pi-lock" переменную в .ts,

сделайте ваше состояние как ваше требование

    <p-button (click)="_toggleOpened()" [icon]="pi pi-lock"></p-button>


    ts file:
    variable="pi pi-lock"

     private _opened: boolean = true;
      private _toggleOpened(): void {
        this._opened = !this._opened;
if(!this.opened)
{
this.variable="pi pi-lock-open";
}
else{
this.variable="pi pi-lock"
}
      }