click event not triggered second time on semantic UI modal with angular 2 rc4
<p>I am using angular 2(rc 4) with semantic UI for my application. I am using semantic UI modal for confirmation before deleting product from list of products on productList screen. The functionality expected is as below :
1) Click on delete button
2) Modal pop ups for confirmation
3) On click of no/deny, modal hides, back to productList screen.
4) on click of yes/approve, a product is deleted from the list and productList screen is updated and second modal pops up with deletion successfull message.</p>

<p>The code written below works fine and as expected for the first product to be deleted, but when I click on delete for another product, modal do show up but click event on the modal is not triggered and hence the product is not deleted.
Not sure whether modal is removed from the DOM after using it first time. Any thoughts? Thanks in advance!</p>

<p>productList.html</p>

<pre><code>` &lt;body&gt;
    &lt;table class="ui celled table"&gt;
        &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Date Range&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Frequency&lt;/th&gt;
            &lt;th&gt;Actions&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;tr *ngFor="let product of products"&gt;               
            &lt;td&gt;{{ product.startDate | date: 'dd MMM y'}} - {{ product.endDate | date: 'dd MMM y' |
                ifEmpty:'Ongoing'}}
            &lt;/td&gt;
            &lt;td&gt;{{ product.name }}&lt;/td&gt;
            &lt;td&gt;{{ product.emailFrequency | titleCase : 1 }}&lt;/td&gt;
            &lt;td&gt;
                &lt;div class="ui stackable three columns grid"&gt;
                    &lt;div class="column"&gt;
                        &lt;button id="edit" class="ui icon basic button" (click)="editProduct(product)"&gt;
                            &lt;img src="/img/edit.svg"/&gt;
                            &lt;label&gt;Edit&lt;/label&gt;
                        &lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div class="column"&gt;
        &lt;button id="deleteButton" class="ui icon basic button coupledModal"&gt;
                         &lt;img src="/img/delete-button.svg"/&gt;
                            &lt;label&gt;Delete&lt;/label&gt;
                        &lt;/button&gt;
  &lt;coupledModal (onClicked)="deleteProduct($event, product)"&gt;&lt;/coupledModal&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
</code></pre>

<p>`</p>

<p>modal-component.ts</p>

<pre><code> ` @Component({
selector: "coupledModal",
template: ``       
   &lt;div class="ui small first coupled modal"&gt;
        &lt;div class="header"&gt;Are you sure?&lt;/div&gt;
        &lt;div class="content"&gt;
            &lt;div class="description"&gt;
            &lt;p&gt;If you delete this product, it will be gone forever.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="actions segments"&gt;
            &lt;button class="ui basic button grey deny" (click)="onClick(false)"&gt;
                &lt;i class="remove icon"&gt;&lt;/i&gt;No thanks&lt;/button&gt;
            &lt;button class="ui basic button approve" (click)="onClick(true)"&gt;
                &lt;i class="checkmark icon"&gt;&lt;/i&gt;Yes please&lt;/button&gt;
        &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="ui small second coupled modal"&gt;
        &lt;div class="header"&gt;Done!&lt;/div&gt;
        &lt;div class="content"&gt;
            &lt;div class="description"&gt;
                &lt;i class="huge green check circle outline icon"&gt;&lt;/i&gt;
                &lt;p&gt;Product Deleted Successfully.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="actions"&gt;
            &lt;div class="ui basic button ok"&gt;
                &lt;i class="checkmark icon"&gt;&lt;/i&gt;Done
            &lt;/div&gt;
        &lt;/div&gt;
   &lt;/div&gt; 
 `,
 })
 export class ConfirmModalComponent {
@Output() public onClicked = new EventEmitter&lt;boolean&gt;();

public ngAfterViewInit() {
    /* tslint:disable */
    $('.coupled.modal')
        .modal({
            allowMultiple: false,
            closable  : false,
           // detachable: false,
            selector    : {
                close    : ".close, .actions .button",
                approve  : ".actions .approve, .actions .ok",
                deny     : ".actions .deny"
            }
        });
    // show first of linked modals
    $('.first.modal')
        .modal('attach events', '.button.coupledModal')
    ;
    // attach events to buttons
     $('.second.modal')
        .modal('attach events', '.first.modal .button.approve')
     ;
    /* tslint:enable */
}

public onClick(approved) {
    this.onClicked.emit(approved);
}
}`
</code></pre>

<p>list-component.ts</p>

<pre><code>` @Component({  
 directives: [ ConfirmModalComponent],
 pipes: [TitleCase, IfEmpty, StatusFormat],
 providers: [SingleSignonDataService, ProductDataService],
 selector: "productList",
 templateUrl: "/templates/products/product-list-component.html",
})

export class ProductListComponent implements OnInit {
public products: Product[] = null; 
public model: Product;
private dataService: ProductDataService;   

constructor(dataService: ProductDataService,
          private cookieService: CookieService, private signinService: SingleSignonDataService,
          private directTo: Router) {
this.dataService = dataService;
</code></pre>

<p>}     </p>

<pre><code> public deleteProduct(userAction, product) {
    if (userAction) {
        this.dataService.deleteProduct(product.id)
            .then(result =&gt; {
                let exists = this.products.indexOf(product);
                if (exists &gt; -1) {
                    this.products.splice(exists, 1);
                }
            })
            .catch((error) =&gt; {
                this.errorState = JSON.stringify(error);
            });
    }
}
</code></pre>

<p>Demo plunker link : <a href="https://plnkr.co/edit/Wxqz5DvUES3nh4RogNnr?p=preview" rel="nofollow">https://plnkr.co/edit/Wxqz5DvUES3nh4RogNnr?p=preview</a></p>