-1

I want to add and clear the text field with the same button, I tried something like this

    <ng-click onclick="document.getElementById(
      '44556677').value=''"></ng-click>
  </button>
    <mat-form-field style="width: 100%">
    <mat-label>Grocery item</mat-label>
    <input #groceryInput matInput placeholder="Ex. Rice" id="44556677">
  </mat-form-field>

but it doesn't seem to work and with my little knowledge, I can't fix it or find a solution.

Here you can see the whole

    <mat-toolbar [ngStyle]="{'background-color':'rgba(20, 219, 219'}" >CRUD operations</mat-toolbar>
<h1 style="text-align: center; font-size: 50px; font-weight: bold; margin: 100px">Shopping list</h1>
<mat-card style="width: 50%; margin: auto;" [ngStyle]="{'background-color':'rgba(20, 219, 219, 0.1'}">
  <button [ngStyle]="{'background-color':'rgba(20, 219, 219'}" (click)="post(groceryInput.value) " mat-fab style="float: right;">
    <mat-icon>add</mat-icon>
    <ng-click onclick="document.getElementById(
      '44556677').value=''"></ng-click>
  </button>
    <mat-form-field style="width: 100%">
    <mat-label>Grocery item</mat-label>
    <input #groceryInput matInput placeholder="Ex. Rice" id="44556677">
  </mat-form-field>
  <mat-list>
    <mat-list-item *ngFor="let grocery of groceries$ | async">
      <span style="font-weight: bold;">{{ grocery.id }}. {{ grocery.item}}</span>
      <span style="position: absolute; right: 0;">
        <button mat-icon-button>
          <mat-icon (click)="update(grocery.id, groceryInput.value)" color="primary">
            edit
          </mat-icon>
        </button>
        <button mat-icon-button>
          <mat-icon (click)="delete(grocery.id)" color="warn">
            delete
          </mat-icon>
        </button>
        <button mat-icon-button>
          <mat-icon (click)="post(grocery.item)" color="primary">
            add
          </mat-icon>
        </button>
      </span>
    </mat-list-item>
  </mat-list>
</mat-card>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Max
  • 1

1 Answers1

0

Here, id you are giving ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

see https://stackoverflow.com/a/79022[enter link description here][1]

shubham
  • 1