2

I want to create custom modal window referring this link:- http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box

When i am using it's showing unknown HTML tag and on console showing error, i.e.

Unhandled Promise rejection: Template parse errors: 'modal' is not a known element: 1. If 'modal' is an Angular component, then verify that it is part of this module. 2. If 'modal' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" Open Modal 1

[ERROR ->]<modal id="custom-modal-1">
  <div class="modal">
    <div class="modal-body">

"): HeapMemoryGraphComponent@6:4 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors: 'modal' is not a known element:

Please guide,Thanks.

Vikas Gaurav
  • 244
  • 1
  • 6
  • 19
  • Is your modal code, i.e. the ts file with the selector: 'modal', registered in your app.module.ts file ? In your @NgModule declarations, after having imported the file ? – Fabien Apr 13 '17 at 12:14
  • Refer this [**answer**](http://stackoverflow.com/questions/42735858/ng2-bootstrap-show-hide-modal-as-child-component/42736058#42736058) – Aravind Apr 13 '17 at 12:56

1 Answers1

0

Put this component in declarations in the app.module

@NgModule({
imports: [
    BrowserModule,
    FormsModule
],
declarations: [
    AppComponent,
    ModalComponent <----
],
providers: [
    ModalService
],
bootstrap: [AppComponent]
})
Dmitrij Kuba
  • 998
  • 9
  • 14
  • Hey Dmitrij, ModalComponent showing error inside declarations (Can not find name ModalComponent). – Vikas Gaurav Apr 13 '17 at 12:35
  • import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core'; import {ModalService} from "./modal.service"; @Component({ moduleId: module.id.toString(), selector: 'modal', template: '' }) export class ModalComponent implements OnInit, OnDestroy { @Input() id: string; private element: JQuery; constructor(private modalService: ModalService, private el: ElementRef) { this.element = $(el.nativeElement); } ngOnInit(): void { let modal = this; – Vikas Gaurav Apr 13 '17 at 16:30