The ngFor directive encounters issues when placed within a quotation mark or when used within a Bootstrap Tooltip Tag

.HTML File : I encountered an error saying, "Identifier 'mg' is not defined." However, {{mgr[0].value}} works

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" data-html="true"
title="<table class='popuptable'>
  <thead>
                        <tr >

                          <th>Current Value</th>
                                             
                        </tr>

                      </thead>
                      <tbody>
                        <tr *ngFor='let mg of mgr'>
                          <td>{{mg.value}}   

                        </tr>
                      </tbody>

                    </table>">
  Tooltip on bottom
</button>

.ts file : In my attempt to loop through the 'mgr' array using *ngFor in the .HTML file

 mgr: any[]=[{
    value:'Work 1'
  },
  {
    value:'Work 2'
  }
  ];

Answer №1

To incorporate a table into your HTML code, simply place it within the

<ng-template #tipContent></ng-template>
tags.

Next, assign the template reference to the button's [title]="tipContent" attribute.

Reminder: Ensure to enclose [] around the title.

If you need further guidance, please check out this helpful resource:

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

Tips for assessing the prop that is being passed to a styled component with React and TypeScript

I am trying to apply a background color to a styled component div only if the state "active" is true. This is how I am currently attempting to do it: function Main() { const [active, setActive] = useState(false); return ( <ChildCompone ...

Getting exported members through Typescript Compiler API can be achieved by following these steps:

I am currently working on a project hosted at https://github.com/GooGee/Code-Builder This particular file is being loaded by the Typescript Compiler API: import * as fs from 'fs' Below is a snippet of my code: function getExportList(node: t ...

What causes inability for JavaScript to access a property?

My current coding project involves the usage of typescript decorators in the following way: function logParameter(target: any, key : string, index : number) { var metadataKey = `__log_${key}_parameters`; console.log(target); console.log(metadataKey ...

Angular8's NgFor directive is designed to bind to Iterables like Arrays only

Having an issue retrieving data from Github and displaying it, as I am encountering errors. The code editor is highlighting an error with "followers" in the github-followers.component.ts file. githup-followers.component.html <div *ngFor="let follower ...

Transferring Complex Data Structures from the Realtime Database to Firestore

I am currently in the process of migrating data from Firebase Realtime Database to Firestore, specifically dealing with nested data that I would like to organize into a collection. For example: "data" : { "-LYBzlXPoN0137KRLovk" : { "-LYC-HHqDFgL9Po ...

Steps for integrating the ts component into the index.html file

Is there a way to add the ts component in the index.html file? I've been looking for a solution for quite some time now, but haven't had any luck. Can anyone offer any suggestions or help? ...

Express.js Router does not recognize the term 'this'

Greetings and thank you for taking the time to peruse through this. I am venturing into the realm of express.js and typescript and have stumbled upon an intriguing issue. I am currently trying to unravel the mystery behind why 'this' is undefined ...

Resolving redundancy in Typescript Material-UI Table codebases

Apologies for the ambiguous question title, it was difficult to come up with something more specific. I am currently exploring the Typescript implementation of Material-UI tables, specifically focusing on the table section titled "Sorting and selecting". ...

Using ESLint to enforce snake_case naming conventions within TypeScript Type properties

When working with TypeScript, I prefer to use snake_case for properties within my Interfaces or Types. To enforce this rule, I have configured the ESLint rule camelcase as follows: 'camelcase': ["error", {properties: "never"}], Even though the E ...

Issue with Vue 3 / Typescript: Unable to locate variable name in template

When working with Vue 3 and Typescript, I encountered an error that says "Cannot find name" when trying to reference a data variable in a certain area. How can I resolve this issue? Attached is a screenshot for reference: . Thank you in advance. ...

Oops! The API request was denied with error code 401 - Unauthorized in React

I have been working on incorporating an API into my front-end project using React/Typescript. The documentation for the API specifies that authorization requires a key named token with a corresponding value, which should be included in the header. To stor ...

Error: Property 'xxx' is not a valid attribute for this type

Hey there! I recently converted my React Native JavaScript project into TypeScript and everything seems to be working fine. However, I'm encountering some warnings that I could use some help with. Specifically, I need assistance on how to properly pas ...

Angular - Utilizing Reactive Forms for Nested Object Binding

I have created a FormGroup and initialized it with one formControlName called SerialNumber. The JSON structure for SerialNumber is as follows: { "SerialNumber": { "snValue": "332432" } } I am struggling to bin ...

Enhancing DOM Elements in a React Application Using TypeScript and Styled-Components with Click Event

I've been working on an app using React, Typescript, and styled components (still a beginner with typescript and styled components). I'm trying to create a simple click event that toggles between which of the two child components is visible insid ...

Compare the values of properties in an array with those in a separate array to filter in Angular/TypeScript

There are two arrays at my disposal. //1st array tasks.push({ ID: 1, Address: "---", Latitude: 312313, Longitude: 21312 }); tasks.push({ ID: 3, Address: "---", Latitude: 312313, Longitude: 21312 }); //2nd array agentTasks.push({ID:2,AgentID: 2,TaskID:1}); ...

Angular does not receive events from Socket.io

Recently I started coding with AngularJS and decided to build a real-time app using Socket.io: The service I'm using shows that the connection is fine on the console. Here's a picture of the Console.log output However, when I attempt to emit c ...

Access the previous result of an observable in a fork join pipe using RXJS

When making the first HTTP call to retrieve Shipment Data, it is crucial to handle different scenarios: If the shipment data is not available, the execution will be halted with an error message displayed. If the shipment data is available, I need to proce ...

Having issues with NGXS subscription not functioning properly when selecting a variable

Currently, I am working with Angular 11 and NGXS. One issue I am facing involves a subscription for a variable in the state. Here is the problematic subscription: @Select(state => state.alert.alerts) alerts$: Observable<any[]> ngOnInit(): void { t ...

What could be causing the lack of re-rendering in children components using redux-form?

When the parent component sends data, the children components do not re-render automatically. Re-rendering only occurs when a key is pressed on an input element. SMART User values from the state are sent by the smart component. If we add console.log(this. ...

What is the process for applying this specific style to a certain element?

Here is an example of an element in an Angular2 app: <div class="ticket-card" [ngStyle]="{'background': 'url(' + ticketPath + ')' , 'background-size': 'cover'}"> I would like to enhance the style b ...