CODEWITHSUNDEEP
angulartypescript
MMR
MMR

Reputation: 3009

'modal' is not a known element: in angular2

I tried using model box in angular2,i know hoe to use it with systemConfig.js but now in my new project i have webpack.js and i am not sure how to use with it. my component,

 import {Component,OnInit} from "@angular/core";
import {ModalModule} from "ng2-modal";
 import { Http, Headers } from '@angular/http';

@Component({
    selector: '[tables-basic]',
    template: `
<div class="row">
    <button (click)="myModal.open()">open my modal</button>
    <modal #myModal>
        <modal-header>
            <h1>Modal header</h1>
        </modal-header>
        <modal-content>
            Hello Modal!
        </modal-content>
        <modal-footer>
            <button class="btn btn-primary" (click)="myModal.close()">close</button>
        </modal-footer>
    </modal>
</div>
    `
})
export class TablesBasic implements OnInit {
  students:any;
  constructor(public http: Http) {


    }
    ngOnInit() {
       this.getstudents();
    }
     getstudents() {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json')
        this.http.get('http://localhost:3009/api/auth/getstudents', { headers: headers })
            .subscribe(
            result => {
                if (result.json().error_code == 0) {
                   this.students = result.json().result;
                }
                else {
                    this.students = result.json().result;
                }
            })
    }
}

my error, Error: 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.schema' of this component to suppress this message. (" open my modal [ERROR ->]

Modal header

Can anyone please suggest me help.

Upvotes: 4

Views: 18424

Answers (3)

Sarad Vishwakama
Sarad Vishwakama

Reputation: 125

I also faced the same problem. followed below mention step to solve problem.

.npm install ng2-modal

then Import ModalModule into imports: section of @ngModule

Upvotes: 1

Kartik Rajendran
Kartik Rajendran

Reputation: 121

I had similar error while using third party component "ng2-bs3-modal" There was no build error but while loading the page, it didn't load it and showed
"Loading…" message only.

The solution is 1. Add "import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';" in app.module.ts 2. Add "Ng2Bs3ModalModule" in the imports section under @NgModule portion

This changes solved the problem.

You also may refer https://github.com/dougludlow/ng2-bs3-modal/issues/124

Upvotes: 0

ranakrunal9
ranakrunal9

Reputation: 13558

You need to import ModalModule in your AppModule file and need to add ModalModule inside @NgModule.imports as below :

import {ModalModule} from "ng2-modal";
@NgModule({
    imports: [
        // ...
        ModalModule
    ],
    declarations: [
        App,
        TablesBasic
    ],
    bootstrap: [
        App
    ]
})
export class AppModule {
}

Upvotes: 4

Related Questions