search

zefoy / ngx-dropzone-wrapper

Angular wrapper library for Dropzone
MIT License
174 stars 51 forks source link

previewTemplate with Angular binding #111

Closed psinegmatic closed 6 years ago

psinegmatic commented 6 years ago

How can we use previewTemplate with Angular data-binding. For example

<ng-template *ngIf="true" #previewTemplate>
  <div class="dz-preview dz-file-preview well" id="dz-preview-template">
    <div class="dz-details">
      <div class="dz-filename"><span data-dz-name></span></div>
      <div class="dz-size" data-dz-size></div>
    </div>
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
    <div class="dz-success-mark"><span></span></div>
    <div class="dz-error-mark"><span></span></div>
    <div class="dz-error-message"><span data-dz-errormessage></span></div>
    <div (click)="markAsDealDoc()">test</div>
  </div>
</ng-template>

markAsDealDoc() binding doesn't work. I add this previewTemplate to config by using @ViewChild.

sconix commented 6 years ago

When you change the config the Dropzone area is re-initialized which might cause problems in some situations, not sure if thats the case here since don't get the whole picture of what you are trying to achieve. You can always get the Dropzone reference through the directiveRef and manipulate the Dropzone config through that when no re-initialization is done and you can do everything like it would be done with Dropzone without Angular.

vigalo commented 1 year ago

How can we use previewTemplate with Angular data-binding. For example

<ng-template *ngIf="true" #previewTemplate>
  <div class="dz-preview dz-file-preview well" id="dz-preview-template">
    <div class="dz-details">
      <div class="dz-filename"><span data-dz-name></span></div>
      <div class="dz-size" data-dz-size></div>
    </div>
    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
    <div class="dz-success-mark"><span></span></div>
    <div class="dz-error-mark"><span></span></div>
    <div class="dz-error-message"><span data-dz-errormessage></span></div>
    <div (click)="markAsDealDoc()">test</div>
  </div>
</ng-template>

markAsDealDoc() binding doesn't work. I add this previewTemplate to config by using @ViewChild. Hello, @psinegmatic.

How have you added the template to the config object? The previewTemplate key is of string type, so if I add '#previewTemplate' or 'previewTemplate' the string is printed as innerHTML. Thanks