Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

250
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda