Show modal pop up in Angular 2

Question

I am trying to integrate a modal up to my page based on implementation provided here in this post How to pass data to bootstrap modal dialog in Angular2 and working plunker solution was provided here http://plnkr.co/edit/8wBnEHOS5zNGXNhg9Tzy?p=preview

I have created a new plunkr in AngularJs (As Angular2) option was not there. But, when adding the AppComponent/ModalComponent to my app.ts file, i was seeing an error

   description"XHR error (404 Not Found) loading             http://run.plnkr.co/qf9bnaF8YtMFzfz9/app/app.component"

Here is my plunker code link - http://plnkr.co/edit/pRTaxiaU2S9dtiLYPEtl . Can someone help me whats going wrong here? Thank you !!!

I suspect probably your component is not loaded in app.module.ts — Parth Ghiya, Apr 20 '17 at 02:39

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

Based on the reference of this question Please do as below.

import { CommonModule } from '@angular/common';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
import { CustomComponent } from './custom.component';

@NgModule({
  declarations: [ CustomComponent ],
  exports: [ CustomComponent ],
  imports: [ CommonModule ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CustomModule {}

All you need to do is to add schema in @NgModule. Hope you get the solution.

edited May 23 '17 at 12:09

Community

1
1

answered Apr 20 '17 at 04:25

The Hungry Dictator

3,444
5
37
53

Thank you after importing the schemas and common module, it worked. But in my HTML page, all the controls including the modal window are being shown. Ideally, the controls should pop up after i click on the button, but by default they are showing up in the page. Any guess? – Born2Code Apr 20 '17 at 16:14
Hi Ronak, would you please help me with this code? http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5 Basically i was trying to implement modal pop up by passing the data. But, for some reason its not working. The working solution in previous angular version was mentioned here - http://plnkr.co/edit/8wBnEHOS5zNGXNhg9Tzy?p=preview – Born2Code Apr 21 '17 at 01:49
@Born2Code Hi , You seem to have given empty [plunkr](http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue). Please update the code and again share it, – The Hungry Dictator Apr 21 '17 at 04:43
Ah! I posted right url in my post, but not here. Here is my code – Born2Code Apr 21 '17 at 13:42
Your plunkr is not well formed. I request you do needful and yes move your question to new thread. Thank you. – The Hungry Dictator Apr 24 '17 at 03:46

score 0 · Answer 2 · answered Apr 20 '17 at 03:15

0

Add modal.component.ts in your app.module.ts

import { ModalComponent } from 'location of modal component'

declarations: [
       ModalComponent,
       .......
 ]

answered Apr 20 '17 at 03:15

Vidur Singla

265
3
12

Show modal pop up in Angular 2

2 Answers2