CODEWITHSUNDEEP
javascriptangularangular2-modal
Renê Silva Lima
Renê Silva Lima

Reputation: 2815

Error trying to input modal on Angular 2 aplication

I'm trying to insert a modal on my Angular 2 application but I'm gettin the following error:

Unhandled Promise rejection: Template parse errors: Can't bind to 'showDismiss' since it isn't a known property of 'modal-header'.

I'm using the ng2-bs3-modal plugin. I feel like I'm missing something on the setup of the plugin.

I have already input these three lines on my index.html:

  <script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

I have also pasted this code on my systemconfig.js:

System.config({
    defaultJSExtensions: true,
    map: {
        'ng2-bs3-modal': 'node_modules/ng2-bs3-modal'
    },

And I also had imported the Ng2Bs3ModalModule on my app.module.

This is the html from the component where I got the error:

  <button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>
  <modal #modal>
    <modal-header [showDismiss]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer [showDefaultButtons]="true"></modal-footer>
</modal>

Can someone help me? Thanks in advance. Any other plugin that uses modal will be accepted but I already tried most of them and I manage to get some error on those too.

Upvotes: 0

Views: 175

Answers (1)

Powkachu
Powkachu

Reputation: 2268

Reading the documentation, showDismiss doesn't exist for <modal-header>. You have to use show-close like <modal-header [show-close]="true">. I don't know if you're using another version?

Upvotes: 1

Related Questions