Search code examples
angulariconsmat-input

set icon after input onChange

I want to add icon after input field it will display on change. and another icon if its not on focus.

Can anyone help me please i have tried something like below but i don't know how to toggle icon in this.

<input matInput type="text" style="width: 200px;">
<button mat-mini-fab  style="float: right;" color="primary" (click)="element.disabled = !element.disabled">
  <mat-icon>{{element.disabled ? 'home' : 'edit'}}</mat-icon>
</button>

Thank you

Solution

  • I have found a way to do it.

    in .ts file define two boolean variables.and change value on focus and focus out event of input element.

    home: boolean = false;
edit:boolean = true;

onFocusOutEvent(event: any){
// toggle as you want to use it.
}
onFocusEvent(){
// toggle as you want to use it.
}

    in HTML file

    <input matInput type="text" [formControlName]="element.id" (focusout)="onFocusOutEvent($event)" (focus)="onFocusEvent($event)" >

<button style="float: right;" color="primary" *ngIf="edit">
     <mat-icon>edit</mat-icon>
</button>
<button *ngIf="home" style="float:left;">
<mat-icon>home</mat-icon>
</button>

    i hope it's helpful for someone. thank you