Is it possible to create a click event for a mat-icon within a mat form field (either in the matprefix or matsuffix)?

I am working with a mat-form-field and have incorporated a custom mat-icon within it as a matprefix. However, I am now looking to create a click method for that matprefix icon. Despite my attempts to write a click method, it does not seem to be functioning as intended.

 <mat-form-field floatLabel="never" >         
      <mat-icon  (click)="clicking()"  matPrefix class="formula-icon" svgIcon="lo-formula"
      *ngIf="item[displayedColumn]?.formula != undefined && item[displayedColumn].lock == 'off'">
    </mat-icon>
     <input [value]=currentFocusValue
        autocomplete="off">
    </mat-form-field>

https://i.stack.imgur.com/sslDb.png

angulartypescriptangular-materialmat-form-field

Answer №1

To switch things up, consider using a mat-icon-button:

<mat-form-field>
  <input matInput type="text" value="test" #input>
  <button mat-button 
          *ngIf=item[displayedColumn]?.formula != undefined && item[displayedColumn].lock == 'off'"
          matPrefix
          mat-icon-button
          class="formula-icon" svgIcon="lo-formula"
          (click)="clicking($event,input)">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

clicking(evt: MouseEvent, input: HTMLInputElement) {
input.value = '';
  // prevents the input from being focused after clicking the close button
  evt.stopPropagation();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the Angular Firebase Document and send it back

I have a question related to retrieving a Document from my FireDatabase. The model I am using is for a user, which looks like this: export class User { useremail: string; userid: string; username: string; constructor(usermail: string, use ...

angulardatabasegoogle-cloud-firestore

In order to utilize Node.js/Express/Typescript, it is necessary to use the

My current project involves creating a webservice using Express, with the goal of making it executable from both localhost and an AWS Lambda function via Claudia. In order to achieve this, I am aiming to separate the app configuration from the app.listen ...

node.jstypescriptexpressimportrequire

Angular4 nested components within a Bootstrap table offer a dynamic and visually appealing way

As a beginner with Angular 4, I am working on creating a bootstrap table with nested components. The child component is supposed to display in a single row, but the table is not rendering correctly. Please refer to the image below for a snapshot: snapshot ...

angular

Is it possible to deduce Typescript argument types for a specific implementation that has multiple overloaded signatures?

My call method has two signatures and a single implementation: call<T extends CallChannel, TArgs extends CallParameters[T]>(channel: T, ...args: TArgs): ReturnType<CallListener<T>>; call<T extends SharedChannel, TArgs extends SharedPar ...

typescriptoverloading

In Angular2, declaring variables with log={} and dynamically adding log details like [{id: "Logs List Details1"}, {id: "Logs List Details2"}] is a simple process

When declaring a variable with log = [{id: "Logs List Details1"},{id: "Logs List Details2"},....etc}] dynamically, issues arise when pushing dynamic data to it. If the data is static and pushed incrementally, it exceeds the page limit. However, if only one ...

angulartypescript

Guide to building a nested React component

My custom dropdown component requires 2 props: trigger (to activate the dropdown) list (content to display in the dropdown) Below is the implementation of my component: import { useLayer } from "react-laag"; import { ReactElement, useState } fr ...

javascriptreactjstypescript

How can one trigger a service method in nestjs through a command?

I am looking to run a service method without relying on API REST - I need to be able to execute it with just one command ...

node.jstypescriptnestjs

The first argument passed to CollectionReference.doc() must be a string that is not empty

I'm facing an issue with my Ionic app while attempting to update records in Firebase. The error message I keep encountering has me stumped as to where I might be going wrong. Error: Uncaught (in promise): FirebaseError: [code=invalid-argument]: Functi ...

typescriptfirebasegoogle-cloud-firestore

Exploring the possibilities of utilizing JavaScript within TypeScript

My dynamic javascript object holds all the resources (translation strings) for my app. Here's how it is structured: var ResourceManager = (function () { function ResourceManager() { var currentLanguage = $('#activeLanguage').htm ...

javascripttypescript

Design layout in Angular Material that wraps the content within it

Is there a way to achieve this specific layout with the "plus" icon positioned below the card layout? https://i.sstatic.net/W5ZRM.png I have attempted the code below: <section layout="column" style="background-color: black;"> <md-c ...

angularjscssangular-material

Accessing router params in Angular2 from outside the router-outlet

I am currently working on a dashboard application that includes a treeview component listing various content nodes, along with a dashboard-edit component that displays editable content based on the selected branch of the tree. For example, the tree struct ...

typescriptangularangular2-routing

How can I redirect a page using an axios interceptor in Next.js?

Is there a way to redirect the page in an axios interceptor when dealing with server-side rendering limitations? Unfortunately, I am unable to access the server side context in the axios interceptor. I have tried using next/router but it only works on the ...

typescriptaxiosnext.js

Can you use TypeScript to define generic React functional components?

I am looking to add annotations to a generic in a React functional component like the following: import React, {useEffect, useState} from "react"; interface PaginatedTableProps{ dataFetcher: (pageNumber: number) => Promise<any>, columnNames: ...

javascriptreactjstypescripttypescript-genericsreact-typescript

Navigating OTF components using Angular routes

In our development using Angular 6, we have implemented a feature where components are generated dynamically and routes are set for them through the following code snippet: const template = '<span>generated on the fly: {{name}}</span>&apo ...

angulardynamicroutescomponents

What is the method for setting autofocus to the first input element within a loop?

I am currently working on a loop to display inputs, and I would like to be able to add focus to the first input element when it is clicked. Does anyone have any suggestions on how I can select that first element and set autofocus on it? ...

javascriptangulartypescriptfocus

A guide to incorporating external CSS files in Angular 5 components using styleUrls

I have a unique setup where my Angular 5 application resides in a subdirectory within another parent application. The parent application consists of JSP and other AngularJS applications among other things. My goal is to include a CSS file from the parent ...

javascriptcssangularangular-cliangular-components

Is it possible to insert data into SQL Server from an Angular application without relying on .NET Core?

Is there a way to extract data from an Angular-made form and store it in a SQL Server table without the need for .NET Core? ...

sql-serverangular.net-coreangular5

Add adhesive dashes to the text box

I am looking to add sticky hyphens in a text input field. I have included an image illustrating my requirement. The areas that need fixing are highlighted in red. The first hyphen should appear after every three number inputs, followed by the next one afte ...

htmlcssangular

The absence of a 'body' argument in the send() json() method within the Next.js API, coupled with TypeScript, raises an important argument

Currently, I have set up an API route within Next.js. Within the 'api' directory, my 'file.tsx' consists of the following code: import type { NextApiRequest, NextApiResponse } from "next"; const someFunction = (req: NextApiReq ...

typescriptnext.jstypeerrorsend

Unable to locate the name 'X' despite importing the name directly above

I'm a little confused about the situation at hand. The name is clearly mentioned right above. https://i.sstatic.net/D0CEV.png Displayed below is the content of storage-backend.interface.ts: export declare interface StorageBackend extends Storage { ...

typescriptangular