Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

248
Views
Uncaught (in promise): Error: No provider for MdDialogRef

I have created a Material Design 2 modal component as follows, I want to display the "modal" selector in the html of another angular 2 component:

// putting this html inside the modal, works fine
import { CreateFileDialog  } from './create-file/create-file';

@Component({
  selector: 'modal',
  template: `<button md-fab class="md-fab-bottom-right" (click)="open()"><md-icon>add</md-icon></button>`
})

export class ModalComponent {
  constructor(public dialogRef: MdDialogRef<any>) { }
}

@NgModule({
   declarations: [
        ModalComponent
    ],
   exports: [ModalComponent],
   imports: [
       BrowserModule,
       MaterialModule,
       FormsModule,
       ReactiveFormsModule,
       FlexLayoutModule
   ]
})

export class ModalModule {}

I want to take this modal component above and just add it to the html of this file component:

const modalForm = [CreateFileDialog];

@Component({
   selector: 'files',
   templateUrl: './files.template.html'
 })  

export class FilesComponent { 
      public open(key) {
        let config = new MdDialogConfig();
        config.viewContainerRef = this.viewContainerRef;

        this.dialogRef = this.dialog.open(CreateFileDialog);

        this.dialogRef.afterClosed().subscribe(result => {
          this.dialogRef = null;
        });
    }
 }

 @NgModule({
     declarations: [
       FilesComponent,
       modalForm
      ],
      entryComponents: [modalForm],
      providers: [FilesService],
      exports: [FilesComponent],
      imports: [
        BrowserModule,
        MaterialModule,
        FormsModule,
        ReactiveFormsModule,
        FlexLayoutModule,
        TreeModule,
        ModalModule
     ]
   })

export class FilesModule {}

// template for the file component - files.template.html:
// other html sits in this file above and below the <modal>
<modal></modal>

If i remove "modal" from the files.template and just replace it with the template code for iteself, i.e. the button itself it works fine and I see other similar questions with the answer to just remove the selector from the html but then how would the button get displayed to click to open the modal?? I want to be able to use "modal" in the files template if possible?

over 4 years ago · Santiago Trujillo
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!