Creating a NgFor loop in Angular 8 to display a dropdown menu styled using Material

I'm currently facing an issue with incorporating a Materialize dropdown within a dynamically generated table using *ngFor. The dropdown does not display when placed inside the table, however, it works perfectly fine when placed outside.

<p>Users enabled in this node: {{usersEnabled}}</p>
<p>Users in this node: {{users.length}}</p>
<table>
    <thead>

        <th>
            Email
        </th>
        <th>
            Enabled
        </th>
        <th>
            Actions
        </th>
    </thead>
    <tbody>
        <tr *ngFor="let user of users">
            <td>
                {{user.username}}
            </td>
            <td class="isLink cursorIcon" (click)="enableDisableUser(user.apiKey)">
                {{user.enabled}}
            </td>
            <td>

                <!-- Dropdown Structure -->
                <!-- <button class="btn" (click)="resetPassword(user)">Reset password</button> -->
                <a class='dropdown-trigger btn' data-target='dropdown{{user.apiKey}}'>Drop Me!</a>
                <ul id='dropdown{{user.apiKey}}' class='dropdown-content'>
                    <li><a href="#!">one</a></li>
                    <li><a href="#!">two</a></li>
                    <li class="divider" tabindex="-1"></li>
                    <li><a href="#!">three</a></li>
                    <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
                    <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

Typescript crucial methods

ngOnInit() {
    this.getUsers();
  }

  private getUsers(): void {
    this.userService.getUsersByNodeApiKey(this.nodeKey).subscribe(
      res => {
        this.usersEnabled = res.filter((user: User) => user.enabled).length;
        this.users = res.sort((a, b) => a.enabled < b.enabled ? 1 : -1);
        M.AutoInit();
        var elems = document.querySelectorAll('.dropdown-trigger');
        var instances = M.Dropdown.init(elems, {autoTrigger: true});
      },
      err => console.error(err)
    );
  }

I am utilizing Angular 8 along with Materialize CSS 1.0

Answer №1

To achieve this, you must include [innerHTML] in order to incorporate dynamically generated html within your table as shown below:

[innerHTML]="user.dropdown"

In this case, user.dropdown could be an empty string declared in your .ts file or a specific value intended for use in the drop-down.

You may also consider using user.apiKey in your scenario.

Answer №2

When the user's data is available, try displaying the table/row in the view by including the following code snippet:

<ng-container *ngIf="users.length">
  <tr *ngFor="let user of users">
  .
  .
  .
  </tr>
</ng-container>

I hope this solution works for you!

Answer №3

Hello @Marc Serret i Garcia... I have discovered a solution that may work for you. Please give it a try:

<tbody>
    <tr *ngFor="let user of users">
        <td>
            {{user.username}}
        </td>
        <td class="isLink cursorIcon" (click)="enableDisableUser(user.apiKey)">
            {{user.enabled}}
        </td>
        <td>

            <!-- Dropdown Structure -->
            <!-- <button class="btn" (click)="resetPassword(user)">Reset password</button> -->
            <a class='dropdown-trigger btn' [attr.data-target]='user.apiKey'>Drop Me!</a>
            <ul [id]='user.apiKey' class='dropdown-content'>
                <li><a href="#!">one</a></li>
                <li><a href="#!">two</a></li>
                <li class="divider" tabindex="-1"></li>
                <li><a href="#!">three</a></li>
                <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
                <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
            </ul>
        </td>
    </tr>
</tbody>

Take note of the changes I made -

<a class='dropdown-trigger btn' [attr.data-target]='user.apiKey'>Drop Me!</a>

And also remember to adjust the id of the dropdown accordingly -

<ul [id]='user.apiKey' class='dropdown-content'>
. This worked for me, hopefully it helps you too.

Please refer to my stackblitz example for more details: https://stackblitz.com/edit/multipledropdown

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

Build a new datatable within an Angular component

Currently, I am working on an Angular 2 application where I have a module named Home with a component of the same name. HomeModule.ts: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ...

What is the reason behind the CSS not rendering when async:false is used?

I find it peculiar and am actively seeking an explanation for this anomaly. In my code snippet, the AJAX call seems to be causing unexpected behavior: $('.edit-config').click(function() { var that = this; var msg; ip ...

Angular selects the initial three arrays out of an array

In my code, I have a collection of arrays that are nested within another array. My task is to extract the first three arrays from this collection. For instance, consider the following example: [{[1]},{[2]},{[3]},{[4]}] I apologize for not presenting a p ...

Struggling to position an image and text side by side within a div using CSS

Is there a way to display a message inside a div with an icon positioned to the left? The desired outcome is for the icon to always be next to the text and aligned at the bottom-center of the div. I attempted using the :after pseudo element. However, set ...

The vertical tab layout in HTML and CSS is experiencing an issue where the active tab is not being shown above the

Currently, I am developing a web page featuring vertical tabs where each tab corresponds to an image and some content. However, the problem lies in the fact that the active tab is not displaying above the image as expected. In my attempt to resolve this i ...

Adaptive search bar and components housed within a casing

I am struggling to create a responsive box with a search feature for a mobile website. My plan is to incorporate jquery functions into the site, so I need to design an outer container that will house a distinct logo and search bar. However, when I test thi ...

Ways to create a responsive design for this specific part of the

https://i.sstatic.net/2JyyN.jpg Hello everyone, I'm looking to make this section responsive at 768px .AppleContent { background-color: #9ACD32; text-align: center; padding: 50px 200px; color: white; } <section class="section-1"& ...

Vue-Router functions only on specific routes

While my vue-router correctly routes the URL for all menu buttons, it's not displaying each Vue component properly. You can see a demonstration here. Here is a snippet of my HTML (using Vuefy) <div class="navbar-start"> <a ...

Creating a dynamic selection in Angular without duplicate values

How can I prevent repetition of values when creating a dynamic select based on an object fetched from a database? Below is the HTML code: <router-outlet></router-outlet> <hr> <div class="row"> <div class="col-xs-12"> & ...

Images are appearing misaligned in certain sections

I have been utilizing the freewall jQuery plugin for organizing images in my website. While the layout of my first section, located at , is functioning properly, I am encountering some issues with its height. The code snippet that I am currently using is a ...

Adjust the JavaScript variable upon pressing the "c" key

I'm trying to figure out how I can toggle the value of variable x in JavaScript when the key "c" is pressed. Specifically, I want x to change from 0 to 1 when "c" is pressed and revert back to 0 when it's released. I have already defined and name ...

What steps can I take to resolve this CSS problem?

I'm trying to create a box around specific html elements, but the current code is causing each element to be enclosed individually. I don't want to use the html or body element as I have other elements that need to remain outside of the box. h1, ...

Issues with CSS rendering font in a suboptimal way

Whenever I set a simple font rule for my text, the output is not displayed correctly and appears blurry. The font looks fine in Mozilla Aurora browser but displays poorly in newer versions of Google Chrome and Firefox. Does anyone know why this happens? I ...

Tips for converting text input in a textbox to a Date value

My knowledge of Angular is limited, and we are currently using Angular 10. In our application, there is a textbox where users need to input a date in the format 10202020. This value should then be reformatted as 10/20/2020 and displayed back in the same ...

How to choose elements using jQuery according to their CSS properties?

Seeking a solution to a unique challenge I've encountered. The website I frequent has found a way to bypass my uBlock extension by using a script that generates random element classes, such as: <div class="lcelqilne1471483619510ttupv"></div& ...

Concealing scroll bars while still maintaining the ability to scroll by using overflow:scroll

Similar Question: How to hide the scrollbar while still allowing scrolling with mouse and keyboard I have created a sidebar for a web application that needs to enable users to scroll through it without displaying a scrollbar. The content is 500px high ...

Learn how to restrict input to only specific characters in an input box using Angular2 and validations

Is it possible to restrict user input in an input box to only specific characters such as '7' and '8'? I tried adding validations with attributes like type="number", min="7" and max="8", but even then other keys can be inserted before v ...

Exploring jQuery Animation Effects: Enhancing Your Web Experience with Zoom In and Zoom Out

Is there a way to animate a logo using jQuery automatically upon page load? I want the image to zoom out, then zoom in and change to a different image. Can someone please assist me with this task? Below is the code snippet that I have: $(document).ready ...

Tips for creating horizontal dividers with CSS in Vuetify using <v-divider> and <v-divider/> styling

Currently, I am working on a project using Vue.js and adding Vuetify. However, I need to use a component. .horizontal{ border-color: #F4F4F4 !important; border-width: 2px ; } <v-divider horizontal class=" horizontal ...

Loading an external javascript file dynamically within an Angular component

Currently, I'm in the process of developing an Angular application with Angular 4 and CLI. One of my challenges is integrating the SkyScanner search widget into a specific component. For reference, you can check out this Skyscanner Widget Example. T ...