I am displaying about 5 panels in which are rendered from an array and then displayed each panel with its own id, name and content to share. Within each panel i have an expand icon where i am allowing the user to expand the selected panel into a large modal. I am using the example from bootstrap but currently when i click to open in a modal - it opens in large modal but it opens for each item in the array and not just the selected panel. Here is what i have so far: 

```
 <div class="col-sm-4" *ngFor="let item of items; let i = index">
         <div class="panel panel-warning">
            <div class="panel-heading">
                {{item.title}}
               <div class="box-header-btns pull-right">
                  <a title="Expand" type="button" data-toggle="modal" data-target=".bs-example-modal-lg">
                      <i class="glyphicon glyphicon-resize-full"></i>
                  </a>
               </div>
             </div>
             <div class="panel-body modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                 <div class="modal-dialog modal-lg" role="document">
                      <div class="modal-content">
                           {{item.content}}
                      </div>
                 </div>
             </div>
         </div>
  </div>

```

My array to loop to display panels: 

```
 items: Array<Panel> = [
        new Panel(1, 'panel 1', 'show text', 'test data in modal'),
        new Panel(2, 'panel 2','show image', 'more test data'),
        new Panel(3, 'panel 3', 'show graph', 'more and more data')
    ];

class Panel {
  constructor(
    public id: number, 
    public title: string, 
    public footer: string, 
    public content: any) 
}

```

Currently when i open up a modal for an item it also loops through all the other items before the modal closes out.