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

The type 'Observable' does not contain the properties found in type 'User'

I am trying to retrieve user data from Firestore, but encountering an error The type 'Observable' is missing the following properties from type 'User': email, emailVerified, uidts(2739) user.service.ts import { Injectable } from &apo ...

Subscribing to ngrx store triggers multiple emissions

Currently, I have an app with a ngrx store set up. I am experiencing an issue where, upon clicking a button, the function that fetches data from the store returns multiple copies of the data. Upon subsequent clicks, the number of returned copies grows expo ...

The error message "Declaration file for module 'mime' not found" was issued when trying to pnpm firebase app

Currently, I am in the process of transitioning from yarn to pnpm within my turborepo monorepo setup. However, I have run into an issue while executing lint or build commands: ../../node_modules/.pnpm/@<a href="/cdn-cgi/l/email-protection" class="__cf_e ...

The Subject<T> generic type needs to be provided with 1 type argument

Currently, I am setting up Angular Datatables the Angular Way using Angular 6 and encountering an error that I cannot find in any of the documentation. (TS) Generic type 'Subject' requires 1 type argument(s) When hovering over "Subject" in the ...

Utilize Angular 10 to send a post request and subsequently trigger another request upon successfully completing the first

I am looking for a way to register a user on the backend and then sign them in sequentially. The register route will create the user, while the sign-in route will return a UserModel object if successful. If registration fails, an error will be returned f ...

Angular Typescript subscription value is null even though the template still receives the data

As a newcomer to Angular and Typescript, I've encountered a peculiar issue. When trying to populate a mat-table with values retrieved from a backend API, the data appears empty in my component but suddenly shows up when rendering the template. Here&a ...

Can NodeJs packages be incorporated into Angular projects?

Is it possible to use the Pluralize package in an Angular project? I'm encountering an error in VS Code that says 'Can't find module pluralize' when trying to import it. I am unsure if NodeJs packages can be used in Angular. Any help w ...

Radio buttons with multiple levels

Looking to implement a unique two-level radio button feature for a specific option only. Currently, I have written a logic that will display additional radio buttons under the 'Spring' option. However, the issue is that when it's selected, t ...

How to refresh an Observable in Angular 2

Description: Presently, I am utilizing Angular2 (now updated to Angular4). In my component's constructor, I am subscribing to a service using the code: this.policyService.getBaseCommission().subscribe(response => response). The data obtained from ...

Angular - developing a custom web element to enhance the project

Is there a way to convert a single module into a web component and integrate it within the same project? Specifically, I have 3 modules in my project and I am looking to transform only module1 into a web component and incorporate it seamlessly. Thank you! ...

Challenge with Angular *ngFor: Struggling to Access Previous Elements

In my angular and node application, I am using socket.io. When a user joins the room, they can see their username in the user list. If another user joins, the first user can see both usernames but the new user can only see their own. This pattern continues ...

How can I determine which dist folder is utilized during the building of my App if an npm package contains multiple dist folders?

I have integrated an npm package called aurelia-google-maps into my application. This package includes various distribution folders such as AMD, System, CommonJS, Native Modules, and ES2015 within the /node_modules/ directory like so: /node_modules/ /a ...

How can Angular CLI add extra static resources while live reloading?

Currently, I am utilizing the most recent version of the Angular CLI. The issue I'm facing involves mock http calls that reference local JSON files such as '../app/myfile.json'. When I reload the application, I consistently encounter 404 err ...

Creating a Modern Application with MEAN stack utilizing Angular 2 and Angular-CLI

Currently, I am in the process of developing a MEAN app using Angular 2 and Angular CLI for building. Everything seems to be running smoothly as my GitHub repository can attest (link here). However, upon trying to access the page, I encounter multiple refe ...

What is the process for transforming a nested dictionary in JSON into a nested array in AngularJS?

I am looking to create a form that can extract field values from existing JSON data. The JSON I have is nested with dictionary structures, but I would like to convert them into arrays. Is there a way to write a recursive function that can retrieve the key ...

What is the process for creating static pages that can access local data within a NextJS 13 application?

I recently completed a blog tutorial and I must say, it works like a charm. It's able to generate dynamic pages from .md blog posts stored locally, creating a beautiful output. However, I've hit a roadblock while attempting what seems like a sim ...

The concept of inheriting directives/scopes

Just wondering if directives declared within a Component in Angular 2 automatically apply to its children Components. And when it comes to variables declared on the Component, do they get inherited by the children Components or must they be explicitly pa ...

Leveraging the power of mat-option and mat-radio-button within a mat-select or mat-selection-list

I'm currently working on a unique form element that combines checkboxes and radio buttons to create a multi-level selection feature. For instance, you can use it to configure properties for a car where a radio option (Digital or FM) is dependent on t ...

What is the method to remove curly brackets from a different data category?

If I have a type like this type Z = {a: number} | {} | {b: boolean} | {c: string} | ...; Is there a way to get the same type but without {}? type Y = Exclude<Z, {}>; ⇧This will result in Y = never, because all variants can be assigned to {} and a ...

Guide to asynchronously loading images with Bearer Authorization in Angular 2 using NPM

I am in search of a recent solution that utilizes Angular2 for my image list. In the template, I have the following: <div *ngFor="let myImg of myImages"> <img src="{{myImg}}" /> </div> The images are stored as an array w ...