Creé un componente modal Material Design 2 de la siguiente manera, quiero mostrar el selector "modal" en el html de otro componente angular 2:

 // 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 {}

Quiero tomar este componente modal de arriba y simplemente agregarlo al html de este componente de archivo:

 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>

Si elimino "modal" de los archivos. plantilla y simplemente lo reemplazo con el código de la plantilla, es decir, el botón en sí funciona bien y veo otras preguntas similares con la respuesta para simplemente eliminar el selector del html, pero entonces ¿cómo? ¿Se muestra el botón para hacer clic para abrir el modal? ¿Quiero poder usar "modal" en la plantilla de archivos si es posible?