Materialize CSS dropdown inside ngFor Angular 8 - css

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>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</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

Answer 1

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.

Answer 2

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!

Answer 3

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>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</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