kukhariev / ngx-uploadx

Angular Resumable Upload Module
https://github.com/kukhariev/ngx-uploadx
MIT License
43 stars 23 forks source link

dynamic directive id #320

Closed ingen2 closed 3 years ago

ingen2 commented 3 years ago

Hi I need many multiple uploader , per my categories.

How can I set directives id dynamically

I used upload directive in *ngFor , but directives id confilicted:

my Code :

 <div *ngFor="let item of categories">
    <h3>{{item.name}}</h3>
    <input
    [attr.id]="item.id"
    (click)="???????????.value = ''"   // <== My problem is here 
    (state)="onStateChanged($event)"
    [control]="control"
    [uploadx]="tusoptions"
    id="{{item.id}}"
    type="file"
    class="file_select"
    />
</div>

What to write in ???????? place?

kukhariev commented 3 years ago

Hello, https://angular.io/guide/template-reference-variables#template-input-variable Template reference variables not work in *ngFor.

https://github.com/kukhariev/ngx-uploadx/issues/13 what is (click) is doing. It's not usually needed. I suggest wrapping the directive in a component:

<div *ngFor="let item of categories">
  <upload-input-wrapper [item]="item"></upload-input-wrapper>
</div>

...
Component({
  selector: 'upload-input-wrapper',
  templateUrl: './upload-input-wrapper.component.html',
  providers: [UploadxService] // <- Add if needed fully isolated uploaders
})
...