title: Angular attr.data-target and attr.id not working
body: <p>I am trying assign unique id to my bootstrap modal as it's being using ngFor. Following is my code.</p>
  
  <pre><code>&lt;div class="container shadow lead-container" data-toggle="modal" [attr.data-target]="customId"&gt; -------------------------&gt; . Data-target is set to customId
    &lt;div class="row text-left"&gt;
      ----------------------&gt; Other Content goes here
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!--Lead Popup--&gt;
  &lt;div class="modal fade" [attr.id]="customId" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"&gt; -----------&gt; [attr.id] is set to customid
      &lt;div class="modal-dialog" role="document"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="container popup-container"&gt;
            &lt;div class="row text-left"&gt;
  
               -------------------------------------&gt; Modal Content Goes Here 
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  </code></pre>
  
  <p>Following is my <strong>component.ts</strong>:</p>
  
  <pre><code>import { Lead } from './../models/lead';
  import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
    selector: 'app-lead',
    templateUrl: './lead.component.html',
    styleUrls: ['./lead.component.css']
  })
  export class LeadComponent implements OnInit {
    @Input() public lead: Lead;
    @Input() public index;
    public customId: string;
  
  
    constructor() { 
    }
  
    ngOnInit() {
      this.customId = "custom".concat(this.index);
    }
  
  }
  </code></pre>
  
  <p>When i click on div. The modal doesnt popup for some reason. Any help would be much appreciated</p>