Dropzone within a modal component example

app.module.ts

import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropzoneModule } from 'ngx-dropzone-wrapper';
import { DropzoneModalComponent } from './page/dropzone-modal.component'

// *******************************************************************************
// NgBootstrap

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

// *******************************************************************************
// App

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { AppService } from './app.service';
import { LayoutModule } from './layout/layout.module';

// *******************************************************************************
// Pages

import { PageComponent } from './page/page.component';

// *******************************************************************************
//

@NgModule({
  declarations: [
    AppComponent,
    NotFoundComponent,
    DropzoneModalComponent, // Add modal component to "declarations"

    // Pages
    PageComponent
  ],

  imports: [
    BrowserModule,
    NgbModule,
    DropzoneModule,

    // App
    AppRoutingModule,
    LayoutModule
  ],

  entryComponents: [
    DropzoneModalComponent // Add modal component to "entryComponents"
  ],

  providers: [
    Title,
    AppService
  ],

  bootstrap: [
    AppComponent
  ]
})
export class AppModule {}

dropzone-modal.component.ts

import { Component, ViewChild } from '@angular/core';
import { DropzoneDirective } from 'ngx-dropzone-wrapper';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-dropzone-modal',
  template: `
  <div class="modal-header">
    <h5 class="modal-title">Upload</h5>
    <button type="button" class="close" (click)="modalService.dismiss('Cross click')">&times;</button>
  </div>
  <div class="modal-body">
    <div class="dropzone" [dropzone]="dropzoneConfig">
      <div class="dz-message needsclick">
        Drop files here or click to upload
        <span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
      </div>
      <div class="fallback">
        <input name="file" type="file" multiple>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" (click)="modalService.close('Close click')">Close</button>
    <button type="button" class="btn btn-primary">Complete</button>
  </div>
`,
  styleUrls: [
    '../../vendor/libs/ngx-dropzone-wrapper/ngx-dropzone-wrapper.scss'
  ]
})
export class DropzoneModalComponent {
  @ViewChild(DropzoneDirective, { static: false }) dropzoneInstance: DropzoneDirective;

  dropzoneConfig = {
    url: '/upload',
    parallelUploads: 2,
    maxFilesize: 50000,
    filesizeBase: 1000,
    addRemoveLinks: true,
    previewTemplate: `
<div class="dz-preview dz-file-preview">
  <div class="dz-details">
    <div class="dz-thumbnail">
      <img data-dz-thumbnail>
      <span class="dz-nopreview">No preview</span>
      <div class="dz-success-mark"></div>
      <div class="dz-error-mark"></div>
      <div class="dz-error-message"><span data-dz-errormessage></span></div>
      <div class="progress">
        <div class="progress-bar progress-bar-primary"
          role="progressbar"
          aria-valuemin="0"
          aria-valuemax="100"
          data-dz-uploadprogress></div>
      </div>
    </div>
    <div class="dz-filename" data-dz-name></div>
    <div class="dz-size" data-dz-size></div>
  </div>
</div>`
  };

  constructor(private modalService: NgbActiveModal) {}

  ngAfterViewInit() {
    console.log(this.dropzoneInstance)
  }
}

page.component.ts

import { Component } from '@angular/core';
import { AppService } from '../app.service';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { DropzoneModalComponent} from './dropzone-modal.component'

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html'
})
export class PageComponent {

  constructor(private appService: AppService, private modalService: NgbModal) {
    this.appService.pageTitle = 'Page';
  }

  open() {
    const modal = this.modalService.open(DropzoneModalComponent) // Render modal with modal component
    
    modal.result.then((result) => {
      console.log(`Closed with: ${result}`);
    }, (reason) => {
      console.log(`Dismissed ${this.getDismissReason(reason)}`);
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }
}

Got it! Thanks!!