Materialize CSS dropdown inside ngFor Angular 8

Question

I'm trying to add a Materialize dropdown inside a table generate with *ngFor and the dropdown didn't show. If I put the dropdown code outside the table it works.

<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 important 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'm using Angular 8 and Materialize CSS 1.0

try using ```data-activates = dropdown{{user.apikey}}``` in your anchor tag, instead of ```data-target``` — CaffeinatedCod3r, Nov 18 '19 at 09:07
With data-activates the console launch the following error: Can't bind to 'activates' since it isn't a known property of 'a'. — Marc Serret i Garcia, Nov 18 '19 at 10:21
See this tutorial https://www.tutorialspoint.com/materialize/materialize_dropdowns.htm — CaffeinatedCod3r, Nov 18 '19 at 10:55

score 0 · Answer 1 · answered Nov 18 '19 at 07:56

0

For that you need to add [innerHTML] which enables generated html inside your table like this

[innerHTML]="user.dropdown"

Where as user.dropdown may be an empty string defined in your .ts file or some value which you want to use in drop-down.

May be in your case user.apiKey can also be used.

answered Nov 18 '19 at 07:56

Awais

4,752
4
17
40

I don't understand you. Thanks you – Marc Serret i Garcia Nov 18 '19 at 08:24

score 0 · Answer 2 · 2019-11-18T08:36:43.247

0

Try rendering the table / row in the view once users scope has it's data by add a

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

Hope this helps!

edited Nov 18 '19 at 08:36

answered Nov 18 '19 at 08:04

It didnt worked for me. Also you only can add one template binding in the same element. Thanks you! – Marc Serret i Garcia Nov 18 '19 at 08:28
Surround the `` with `` and add `*ngIf` to `` – Nov 18 '19 at 08:33
Update my answer, @MarcSerretiGarcia. Take a look. – Nov 18 '19 at 08:37
Not sure what's wrong. Take a look at the following link which I found in jsfiddle. https://jsfiddle.net/8u0j59ay/11/. Hope this helps. – Nov 18 '19 at 09:00
I think that the problem is related with the ngFor and the dynamic data. The code outside the table works. – Marc Serret i Garcia Nov 18 '19 at 10:23

Chetan Oswal · Answer 3 · 2020-03-17T09:22:01.240

Hey @Marc Serret i Garcia... I have found a work around. Try if my provided solution works:-

<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>

Look for the changes that I have made - <a class='dropdown-trigger btn' [attr.data-target]='user.apiKey'>Drop Me!</a>

And the other for the id of dropdown - <ul [id]='user.apiKey' class='dropdown-content'>. It worked for me. Hope this helps.

Please look at my stackblitz:- https://stackblitz.com/edit/multipledropdown

Materialize CSS dropdown inside ngFor Angular 8

3 Answers3