Why the Clear button not getting rendered on mat-form-field input?

I have the following output where I can see the HTML is rendered as a string instead of being evaluated.

All I need to inspect is when something as input exists in the text box it should give me a ‘Clear’ sign at the end of the text box to clear the value other than it should allow me to enter the input.

I don’t know what I am doing as wrong.

Following is the HTML code:

<mat-card class="example-card">
  <form [formGroup]="form" (ngSubmit)="submit()">
    <mat-card-header>

    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title-group>
    <mat-card-title> Qoniac Currency Conversions </mat-card-title>
    <mat-card-subtitle>Please enter amount in dollar currency. (e.g. 4578,88 or 7578. 
                Cents supported range (0-99) and dollar supported range (0-999 999 999) )</mat-card-subtitle>
                
    </mat-card-title-group>
    </mat-card-header>
    <mat-divider></mat-divider>
    <mat-card-content class="justifyMatContent">      
      <mat-form-field class="example-full-width" appearance="outline">
        <mat-label>Amount</mat-label>
        <input matInput placeholder="Enter amount" formControlName="currency">
        
        @if (form.currency) {{ 
          <button matSuffix mat-icon-button aria-label="Clear" (click)="form.get('currency')?.setValue('')">
            <mat-icon>close</mat-icon>
          </button>
        }}

        <mat-error *ngIf="form.get('currency')?.hasError('pattern')">
          input amount must be in currency format(e.g. 4545,15  or 45789. Supported dollar range (0-999 999 999 ) and cents range (0-99))
        </mat-error>
      </mat-form-field>
      
      <mat-card class="justifyInnerMatContent">
        <mat-card-content>Simple card</mat-card-content>
      </mat-card>
        <div class="mat-elevation-z8">                    
        </div>
    </mat-card-content>    
    <mat-card-actions>    
      <button mat-raised-button color="accent" style="width: 100%">Convert to English Words</button>
    </mat-card-actions>
  </form>
</mat-card>`

and following is the Typescript code:

import { Component } from '@angular/core';
  
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app-material2';
  
  currencyValue : string = "";
  
  form: FormGroup = new FormGroup({});
   
  constructor(private fb: FormBuilder) {
  
    this.form = fb.group({
      currency: ['', [Validators.pattern(/^\d+(,(0?\d|[0-9][0-9]))?$/)]],
    })
  }
    
  get f(){
    return this.form.controls;
  }
   
  submit(){
    console.log(this.form.value);
  }
}

Do I need to implement ValueAccessorControl interface? Note that I have only one control and not the group of controls. But everywhere I saw mostly the validation is being done in a group manner.

Searched but didn’t get the same as my problem.

>Solution :

1. Your @if() syntax is incorrect, it should be with single brace {} but not double braces {{}}. Note that @if is only available from the Angular 17.

2. If you want to show the button when the currency control has value, you should use form.controls["currency"].value.

@if (form.controls["currency"].value) {
    <button
      matSuffix
      mat-icon-button
      aria-label="Clear"
      (click)="form.get('currency')?.setValue('')"
    >
      <mat-icon>close</mat-icon>
    </button>
}

Or with the *ngIf directive:

<button *ngIf="form.controls['currency'].value"
  matSuffix
  mat-icon-button
  aria-label="Clear"
  (click)="form.get('currency')?.setValue('')"
>
  <mat-icon>close</mat-icon>
</button>

3. Note that your current field allows alphabetic, to restrict only numerical value to be inputted, you need the type="number" attribute.

<input
    matInput
    placeholder="Enter amount"
    formControlName="currency"
    type="number"
/>

Demo @ StackBlitz