1

I am trying to implement modal form in my angular application. My code looks alright to me as i do not see any error. I have installed ngx-modal into my application and i have also imported the ModalModule in my app.module.ts file. What could be the reason why the modal form is not responding?

<button class="btn btn-success"  data-toggle="modal" data-target="#myModal">Open</button>

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
</div>
      </div>
    </div>
  </div>
</div>

app.module.ts

import {ModalModule} from 'ngx-modal';

imports: [          
        ModalModule,
],
Roman C
  • 49,761
  • 33
  • 66
  • 176
Liska Liskor
  • 2,831
  • 4
  • 17
  • 22
  • why **ngx-modal** preferred over **ng2-modal** ? any specific reason? – Aravind Mar 04 '17 at 22:57
  • the ng2-modal is deprecated – Liska Liskor Mar 04 '17 at 23:03
  • what is the reason can you elaborate, I guess it has everything in it. – Aravind Mar 04 '17 at 23:08
  • I don't get your question. Sorry? Are you refering to why i said ng2-modal is deprecated? if so, when i was installing ng2-modal, the terminal threw a warning that ng2-modal had deprecated and that, i should install ngx-modal instead – Liska Liskor Mar 04 '17 at 23:09
  • yes. exactly. why you said ng2-modal is deprecated? also what is superior in the ngx-modal over ng2-modal?? – Aravind Mar 04 '17 at 23:11
  • I don't really know what makes ngx-modal superior. I basically thought since ng2-modal is deprecated, it won't function well with my app – Liska Liskor Mar 04 '17 at 23:14
  • Have a look at this [**answer**](http://stackoverflow.com/questions/42460418/angular-2-ng2-bootstrap-parent-component-call-modal-show-in-child-component-n/42463516#42463516) and if u r not satisfied still, we will fix this ngx modal – Aravind Mar 04 '17 at 23:17
  • was my answer help ful? – Aravind Mar 05 '17 at 00:35

2 Answers2

1

you have required to open your modal with

<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()">&times;</button>
    </modal-footer>
</modal>
Roman C
  • 49,761
  • 33
  • 66
  • 176
0

Following are your mistakes

  1. You are trying to use the below line similar to the Traditional Bootstrap Modal, which is wrong as the usual one works with jQuery and Bootstrap.js

    <button class="btn btn-success" data-toggle="modal" 
         data-target="#myModal">Open</button>

  2. You are using id to define a name to the modal component which is also invalid in the case of typescript and angular2 

    <div class="modal fade" id="myModal" role="dialog">

Solution: Replacing the lines in the below code, will work as expected for ngx-modal.

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ModalModule} from "ngx-modal";
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <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>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule,ModalModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

LIVE DEMO

Aravind
  • 40,391
  • 16
  • 91
  • 110