How to create a custom preview component?

If the default file preview component and the ones for images and videos don't fit your needs then you can create a custom preview component. Use this template as a starting point.

import { Component, OnInit } from '@angular/core';
import { NgxDropzonePreviewComponent } from 'ngx-dropzone';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'custom-dropzone-preview',
  template: `
    <div>Preview here!</div>
    <ng-content select="ngx-dropzone-label"></ng-content>
    <ngx-dropzone-remove-badge *ngIf="removable" (click)="_remove($event)">
    </ngx-dropzone-remove-badge>
	`,
  styleUrls: ['./custom-dropzone-preview.component.scss'],
  providers: [
    {
      provide: NgxDropzonePreviewComponent,
      useExisting: CustomDropzonePreviewComponent
    }
  ]
})
export class CustomDropzonePreviewComponent extends NgxDropzonePreviewComponent implements OnInit {

  constructor(
    sanitizer: DomSanitizer
  ) {
    super(sanitizer);
  }

  ngOnInit() {
    if (!this.file) {
      console.error('No file to read. Please provide a file using the [file] Input property.');
      return;
    }

    console.log(this.file);
  }
}

:host() {
    min-width: unset !important;
    max-width: unset !important;
    padding: 0 !important;

    &:hover,
    &:focus {
        ngx-dropzone-remove-badge {
	    opacity: 1;
        }
    }

    ngx-dropzone-remove-badge {
	opacity: 0;
    }
}

IMPORTANT: If you want to use your component within the dropzone project it as a default preview component.

<custom-dropzone-preview ngProjectAs="ngx-dropzone-preview">
</custom-dropzone-preview>