CODEWITHSUNDEEP
angulartypescriptbootstrap-modal
Anuj Marwaha
Anuj Marwaha

Reputation: 53

BootStrap Modal issue in angular 6

I have created a custom component in my project. The html of that component has Bootstrap modal in which i am displaying some text which gets passed as input to this component from app module (attribute name is testInput) . The type script of this component has the attribute name marked with @Input annotation.

In app component html file, I have two instances of this custom component and value passed as input is different. When i run this project, the displayed value in html (outside of the modal) of the custom component comes different for two instances. However the same attribute which is displayed inside the modal window is same for both instances of custom component when button is clicked. Please help to resolve the issue.

app.component.html

<app-tesmodal [testInput] ="'anish'"></app-tesmodal>
<app-tesmodal [testInput] ="'anuj'"></app-tesmodal>

test-modal.component.ts

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-tesmodal',
  templateUrl: './tesmodal.component.html',
  styleUrls: ['./tesmodal.component.css']
})
export class TesmodalComponent implements OnInit {

  @Input() testInput: string;
  constructor() { }

  ngOnInit() {
  }
}

Code for test-modal.component.html

 {‌{testInput}}
<div class="container">
    <h2>Modal Example</h2>
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
    <div class="modal" id="myModal" role="dialog">
      <div class="modal-dialog">
        <h4 class="modal-title">{‌{testInput}}</h4>

        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header </h4>
            <h4 class="modal-title">{‌{test}}</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>        
      </div>
    </div>    
  </div>

I am expecting the modal content to be different for two different instances of component

Upvotes: 0

Views: 2131

Answers (1)

Johns Mathew
Johns Mathew

Reputation: 812

Your component is rendered correctly by Angular. If you inspect your angular application in chrome, you can see two distinct modal components with the correct data. But, the issue here is that you are using the same id for both the modals.

In your test-modal.component.html file, you have a data-target="#myModal" code. When bootstrap sees this code, it is interpreted as - When this button is clicked, show the modal box with id = myModal. This would work if there is only one modal. But in your case, there are two instances of app-tesmodal. This creates two modals with same id myModal. So, when you click the Open Modal button, bootstrap looks for the first item with id = myModal and opens it. This is why you always get the same modal irrespective of the button clicked.

To solve this, you need unique id for each modal. Replace the Open Modal button code with the below:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" [attr.data-target]="'#myModal' + testInput">Open Modal</button>

Replace the modal div open tag with the below code:

<div class="modal" [attr.id]="'myModal' + testInput" role="dialog">

Now, you are dynamically setting the id for the modals based on the input passed to the tesmodal component. This ensures that the correct modal is triggered on button click.

Full html code for test-modal.component.html below:

{{testInput}}
<div class="container">
  <h2>Modal Example</h2>
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" [attr.data-target]="'#myModal' + testInput">Open Modal</button>
  <div class="modal" [attr.id]="'myModal' + testInput" role="dialog">
    <div class="modal-dialog">
      <h4 class="modal-title">{{testInput}}</h4>

      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header </h4>
          <h4 class="modal-title">{{testInput}}</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions