Deleting The Report Template

The delete event can be processed the same way as the update event. We need to assign a click event to the delete button in the child template:

# src/app/report/report-template.html 
#... 
   <button class="btn btn-default btn-xs pull-right" type="button" 
                (click)="deleteReportTemplate(model)"> 
      <span class="glyphicon glyphicon-remove" aria-hidden="true"> 
      </span> 
   </button> 
#... 

Then add the function and the event emitter to process that click in the child:

// src/app/report/report-template.component.ts 
//... 
export class ReportTemplateComponent { 
  //... 
  @Output() onDeleteReportTemplate = new EventEmitter<any>(); 
 
  deleteReportTemplate(model) { 
    this.onDeleteReportTemplate.emit(model); 
  } 
} 

In the parent template bind a function to the event coming from the child:

# src/app/report/report.html 
# ... 
  <sh-report-template *ngFor="let template of items" 
       [template]="template...