Using Angular's mat-tooltip to trigger a function

I am looking to implement a feature where calling the method selections() from a button tooltip triggers a specific action and returns a string to be displayed when hovering over the tooltip. I attempted to interpolate the returned value in the HTML code, but it did not yield the desired result.

app.component.html

<button mat-raised-button
      matTooltip={{selections()}}
      matTooltipClass = "test"
      aria-label="Button that displays a tooltip when focused or hovered 
      over">
Action
</button>

The function should return the string "selected" and display it when hovering over the tooltip.

app.component.ts

selections() {
this.selectedelems = [];
this.selection.selected.map(id => this.tableData.data.filter((row: any) => 
{
  if (row._id === id) {
    this.selectedelems.push(row.name);
    this.selected = this.selectedelems.join('\r\n');
    }
}));
return this.selected;
}

Answer №1

To display a tooltip using property binding, you should utilize a template expression. The code snippet below demonstrates how to invoke your method and capture the returned string.

<button mat-raised-button
      [matTooltip]="selections()"
      matTooltipClass = "test"
      aria-label="Button that displays a tooltip when focused or hovered 
      over">
Action
</button>

For more information on template expressions, please refer to the link provided below:

https://angular.io/guide/template-syntax#template-expressions

If you are interested in learning more about property binding, check out the following link:

https://angular.io/guide/template-syntax#property-binding


Please Note:

While using property binding to populate the tooltip through a component method is an effective approach, it was not the primary issue addressed in this question. In this case, interpolation would have also sufficed: matTooltip="{{selections()}}"

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

How come TypeScript does not generate an error when attempting to import a default export that does not exist?

As I work on converting my code from non-TypeScript CommonJS files to TypeScript ES6 modules, I encountered an issue with the import statements. Specifically, I needed to use import * as x instead of import x: The original snippet looked like this: const ...

What is the method to verify if an object contains a specific property or object in TypeScript?

When I try to verify if (!window.MSStream) ... I encounter an error in TypeScript, the intellisense highlights the MSStream object because it has not been declared - which is precisely why I need to check it. Unfortunately, this prevents me from building ...

The index type cannot be specified as 'null'

I am currently working with Typescript and have strict null checking enabled. Whenever I try to compile the code below, I receive an error stating "type 'null' cannot be used as an index type." function buildInverseMap(source: Array<string | ...

Utilize a locally-hosted sentry server in conjunction with an Ionic 3 application

I've been following the instructions in this documentation: Although we have an on-premise Sentry server, when I try to add the sentry-cordova plugin with cordova plugin add sentry-cordova, it prompts me to log in to the sentry.io server. How can I c ...

Avoiding repeated form submissions within a system that does not retain session state

While previously working in PHP, I used to generate a unique id in order to prevent duplicate form submissions. This involved storing the id in a session variable and comparing values on submission. Although I never found this solution ideal, I struggled t ...

Replace deprecated TypedUseSelectorHook with createSelectorHook for improved functionality

In my TypeScript code, I used the following to create a typed selector with Redux: import { useSelector, TypedUseSelectorHook } from 'react-redux'; export interface RootState { user: { account: string; } }; export const useTyped ...

"What is the most effective way to utilize and integrate the `setValue` function from react-hook-form within a custom react hook

Struggling to pass setValue to a react hook? In my custom react hook, I need to set values in a form using react-hook-form's setValue. Yet, after migrating from v6 to v7, I'm having trouble figuring out the proper typing for this. This is how t ...

Tips on preventing Realtime database onWrite trigger function callback from iterating through data that has been altered

I am currently developing a 1 vs 1 game matching system using a real-time database. The system works by creating a record in the users table when a user signs in. Once there are two players with a status of placeholder, a cloud function generates a gameInf ...

Validator for ngModel in Angular 2 conveniently located within the component

Trying to simplify the process of implementing a custom validator logic for ngModel, I have a pre-defined model (interface) that already stores all necessary data. Why go through the trouble of creating an identical schema with FormControls when the requir ...

What is the methodology for obtaining the setter property type in TypeScript?

Describe a scenario where an object contains both getter and setter methods with different types. How can we determine the type of the setter function? Consider defining an object with getter and setter functions like the example below: type Foo = { g ...

Discover the inferred arguments of methods declared on an object in TypeScript

Assume I have methods that are defined in the following way: const methods = { methodOne(a: string) { return a; }, methodTwo(a: number) { return a; }, methodThree() {} } as const; I am able to deduce the type of methods: type MethodDefinitio ...

Tips for creating cascading dynamic attributes within Typescript?

I'm in the process of converting a JavaScript project to TypeScript and encountering difficulties with a certain section of my code that TypeScript is flagging as an issue. Within TypeScript, I aim to gather data in a dynamic object named licensesSta ...

How can I trigger both the submit event and close a modal when a form is submitted in Angular 2 with Bootstrap?

Within a bootstrap modal, I have implemented a form. Upon the submission of the form by the user, the (submit) event is supposed to trigger addArticle($event) and subsequently, the modal should close. <div class="modal fade"> <div class="modal- ...

Issue with resolving symbol JSON in Angular 7 when using JSON.stringify

Let me start off by saying that I am new to Angular 7. Currently, I am in the process of developing an application using Angular 7 with a C# backend. The specific challenge I am facing is the need to serialize an object in my component/service before sendi ...

The value of a boolean remains unaffected after a function is executed following a button press

I am facing an issue with two angular components. One of them should only be displayed when a search button in the first component is clicked. However, my code is not working as expected and I have to manually change the boolean value "clicked" for it to w ...

Is there a way to manage specific HTML elements in Angular?

I am working on displaying a list of enable/disable buttons for different users. The goal is to show the appropriate button for each user based on their status - enabling if disabled and disabling if enabled. To achieve this, I have utilized the flags "use ...

Assigning fields dynamically based on a generic string union concept

My goal is to create a function that can dynamically add fields and functions to an object based on arguments provided. However, I'm encountering an issue where the function does not recognize the types of these dynamic fields. Here's a simple ex ...

methods for transforming a string into an object

let styleValues = "{ "background-color": "#4a90e2", "padding": 10px }"; JSON.parse(styleValues); The code snippet above triggers the error below: Uncaught SyntaxError: Unexpected token p in JSON at position 46 ...

Combining rxjs mergeMap with a response that yields an array

Currently, I am working on an ajax request that retrieves an Array of links. My goal is to utilize this array to make separate ajax requests for each link and then combine all the responses together. Here is how I have begun: ajax.post( url, data ).pipe( ...

What are some effective methods for troubleshooting Vue.js computed properties and templates?

I am facing challenges with debugging in Vue.js, especially when it comes to debugging computed properties or data values in templates. Currently, I am using the IIFE method for debugging as shown in : <h2 dir="auto"> {{(function(){debugger;let ...