CODEWITHSUNDEEP
angularprimeng
user11277006
user11277006

Reputation:

How to change the icon on the button?

There is a button that opens the side menu. I want to change the icon to a button depending on the menu that is open or not. That is, if the window is active, then the icon on the button pi pi-lockotherwise pi pi-lock-open. How to do it?

html:

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

ts:

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

Upvotes: 0

Views: 2718

Answers (2)

madhavsai bhushan
madhavsai bhushan

Reputation: 263

make icon attribute as property binding and assign ur "pi pi-lock" to a Variable in .ts,

make ur condition as ur requirement


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

Upvotes: 0

Viraj Khatri
Viraj Khatri

Reputation: 400

Try this:

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

Upvotes: 1

Related Questions