The report generator template

We are going to put all required elements to render the configuration accordion in its own component, and then use property binding and even binding techniques to deliver the messages and requests back and forth. To see how the view of this component will look like, check out the following screenshot (this is when the 'my template' pane inside the accordion is open):

Start by creating a basic component and add the following contents to it:

// src/app/report/report-template.component.ts 
import {Component} from '@angular/core'; 
@Component({ 
  selector: 'sh-report-template', 
  templateUrl: './report-template.html' 
}) 
export class ReportTemplateComponent {} 

Right after creating this new component, call its selector inside the report.html so we know it is available immediately. In other words, replace the place holder line:

# src/app/report/report.html 
#... 
<div id="config" class="tab-pane fade in active">
      <div> PLACE HOLDER FOR CONFIGURATION...