Dynamic Generated Content not Working

[wendicui]

Hi guys,

I am trying to generate both the modal trigger and modal dynamically. I have added the href attribute on the modal trigger, yet nothing shows up when I click it.

modal_000001, which is not dynamically generated works. So the issue is only for dynamic generated ones. Any ideas?

Thanks!

[GlennVanSchil]

Having the same issue. I took the example from #315 but replaced the <a> with a <button> as suggested in #335 (comment) but still nothing happens

[wendicui]

I was able to solve it by running $('.modal').modal(); every time a dynamic element is created

[GlennVanSchil]

Ok I got this working without jQuery.

First of all make sure you add the MaterializeModule to your imports, because I forgot this and took a while before i figured this out...

This is my table with a dynamic amount of rows

<table>
    <tbody>
    <tr *ngFor="let question of questions; let i = index" class="modal-trigger" [attr.data-target]="'modal'+i">
        <td>{{question.value}}</td>
        <td>{{question.timesAsked}}</td>
    </tr>
    </tbody>
</table>

The important thing here is that when you are NOT using an anchor tag, you must add class="modal-trigger". But I didn't use an anchor tag because the href="'#modal'+i" broke my routing and used [attr.data-target]="'modal'+i" instead.

This is my dynamic modal creation, but this seems the same as your modals

<div *ngFor="let question of questions; let i = index" [id]="'modal'+i" class="modal" materialize="modal">
    <div class="modal-content">
        <h4>{{question.value}} was asked {{question.timesAsked}} times</h4>
    </div>
</div>