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?