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