Dynamically assign id

Ionic Framework ionic-v3
1

I can’t assign the id dynamically and i’m not sure why. It makes no sense to me:

<table class="ratingTable">
<tr>
    <td make-droppable *ngFor="let idx of this.divisionSpace" id="{{'td_' + idx}}" >
  ....

I already tried

[attr.id]="'td_' + idx"
attr.id="td_{{idx}}"
[id]="'td_' + idx"

but nothing seems to work. Does anyone know a solution ?

2

I don’t know what divisionSpace looks like or what that make-droppable attribute is doing, but when I try this against a string array, both the first and third versions in your “I already tried” work for me.

3

for a start make-droppable should just log the id:

ngOnInit() {

    let el = this.element.nativeElement;

    console.log("Where is my f**** id ^^: " + el.id);

    ....

A normal assignment (id=“someID”) works.

4

What are you actually trying to achieve here? Generally direct DOM access in Angular applications should be avoided as much as possible.

5

I need drag and drop. Dragula doesn’t work so i try to implement it myself. I can drag an object and drop it in another container, but just one. i can’t differentiate between the cells (td’s). That’s why i need a unique id for every cell.

6

Did you make sure to add its CSS as described in #421?

7

I can’t even import it. But that’s another thread.

8

Dragula works fine for me just using the sample HTML on its README, so there should be light at the end of that tunnel.

9

Thanks for the help. I finally got dragula to work. The README-File was helpful. But i couldn’t add the CSS-File (i tried that in www/index.html and in /src/index.html). So i just copied the CSS-classes in my app.scss file and it worked.

10

What I did for that was to override the sass config to add an include path for the relevant directory, and then @import it in app.scss.