Angular 17 | Angular Material 17.3.1: Issue with Angular Material form field (focus) and (blur) events

Question

I was trying to add (blur) and (focus) effects to my mat-form-field input field, but it appears they're not functioning correctly on my end.

Here's a code example similar to what I have:

html file

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="outline">
    <mat-label *ngIf="isFieldFocused">Selected Food</mat-label>
    <input
      matInput
      placeholder="Select Menu"
      (focus)="click($event)"
      (blur)="inActive($event)"
    />
  </mat-form-field>
</form>

typescript file

export class InputOverviewExample {
  isFieldFocused: boolean = false;

  click($event) {
    if ($event) {
      this.isFieldFocused = true;
    }
  }

  inActive() {
    this.isFieldFocused = $event ? true : false;
  }
}

As a result of this code I have, when I focused on the mat-form-field, it did not display the mat-label. Can anyone suggest what might be wrong with my approach or provide an alternative solution?

--

I'm trying to achieve is to initially display the placeholder. Then, when the input field is focused, it should display the mat-label. Is this possible? Thank you in advance!

Answer 1

It's working fine, the problem is the *ngIf which is messing the animation, instead go for [hidden] which also hides the values but does not destroy it and animation also seems to work!

<mat-label [hidden]="!isFieldFocused">Selected Food</mat-label>

FULL CODE

TS:

import { Component } from '@angular/core';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormGroup, ReactiveFormsModule, FormControl } from '@angular/forms';
import { tap, debounceTime } from 'rxjs/operators';
import { merge } from 'rxjs';
import { CommonModule } from '@angular/common';

/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrl: 'form-field-overview-example.css',
  standalone: true,
  imports: [
    MatFormFieldModule,
    CommonModule,
    MatInputModule,
    MatSelectModule,
    ReactiveFormsModule,
  ],
})
export class FormFieldOverviewExample {
  isFieldFocused: boolean = false;

  click($event: any) {
    console.log('focus');
    if ($event) {
      this.isFieldFocused = true;
    }
  }

  inActive($event: any) {
    this.isFieldFocused = false;
  }
}

HTML:

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="outline">
    <mat-label [hidden]="!isFieldFocused">Selected Food</mat-label>
    <input
      matInput
      placeholder="Select Menu"
      (focus)="click($event)"
      (blur)="inActive($event)"
    />
  </mat-form-field>
</form>

Stackblitz Demo