I am trying assign unique id to my bootstrap modal as it's being using ngFor. Following is my code.

<div class="container shadow lead-container" data-toggle="modal" [attr.data-target]="customId"> -------------------------> . Data-target is set to customId
  <div class="row text-left">
    ----------------------> Other Content goes here
  </div>
</div>

<!--Lead Popup-->
<div class="modal fade" [attr.id]="customId" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> -----------> [attr.id] is set to customid
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="container popup-container">
          <div class="row text-left">

             -------------------------------------> Modal Content Goes Here 
        </div>
      </div>
    </div>
  </div>

Following is my ponent.ts:

import { Lead } from './../models/lead';
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-lead',
  templateUrl: './leadponent.html',
  styleUrls: ['./leadponent.css']
})
export class LeadComponent implements OnInit {
  @Input() public lead: Lead;
  @Input() public index;
  public customId: string;


  constructor() { 
  }

  ngOnInit() {
    this.customId = "custom".concat(this.index);
  }

}

When i click on div. The modal doesnt popup for some reason. Any help would be much appreciated

I am trying assign unique id to my bootstrap modal as it's being using ngFor. Following is my code.

<div class="container shadow lead-container" data-toggle="modal" [attr.data-target]="customId"> -------------------------> . Data-target is set to customId
  <div class="row text-left">
    ----------------------> Other Content goes here
  </div>
</div>

<!--Lead Popup-->
<div class="modal fade" [attr.id]="customId" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> -----------> [attr.id] is set to customid
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="container popup-container">
          <div class="row text-left">

             -------------------------------------> Modal Content Goes Here 
        </div>
      </div>
    </div>
  </div>

Following is my ponent.ts:

import { Lead } from './../models/lead';
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-lead',
  templateUrl: './lead.ponent.html',
  styleUrls: ['./lead.ponent.css']
})
export class LeadComponent implements OnInit {
  @Input() public lead: Lead;
  @Input() public index;
  public customId: string;


  constructor() { 
  }

  ngOnInit() {
    this.customId = "custom".concat(this.index);
  }

}

When i click on div. The modal doesnt popup for some reason. Any help would be much appreciated

• javascript
• html
• angular

• [id]="customId" – Joel Joseph Commented Nov 15, 2019 at 8:54
• Can you please eloborate? I am new to angular – Sumanth Jois Commented Nov 15, 2019 at 8:54
• @JoelJoseph dint work tried it – Sumanth Jois Commented Nov 15, 2019 at 8:57
• have you pass the data of index – Muhammed Albarmavi Commented Nov 15, 2019 at 9:00
• I am setting the customId in ngOnInit(). And i am passing the data for index – Sumanth Jois Commented Nov 15, 2019 at 9:01

1 Answer 1

add "#" to the id.

[attr.data-target]="'#'+customId"