title: Property 'exporter' does not exist on type 'TableListComponent'
body: <p>My <code>tablelist</code> component is <code>childcomponent</code>. I want to make a csv/pdf file but cannot. However with <code>singleComponet</code> this code  works. What is the problem behind it. I get an error like:</p>
  <pre><code>ERROR in src/app/table-list/table-list.component.html:7:38 - error TS2339: Property 'exporter' does not exist on type 'TableListComponent'.
  
  7   &lt;button mat-raised-button (click)=&quot;exporter.exportTable('csv')&quot;&gt;Csv&lt;/button&gt;
                                         ~~~~~~~~
  
    src/app/table-list/table-list.component.ts:11:16
      11   templateUrl: './table-list.component.html',
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component TableListComponent.
  </code></pre>
  <h2>tablecomponet.html</h2>
  <pre><code>&lt;div class=&quot;example-header&quot;&gt;
      &lt;mat-form-field&gt;
        &lt;input matInput (keyup)=&quot;applyFilter($event.target.value)&quot; placeholder=&quot;SearchFilter&quot;&gt;
      &lt;/mat-form-field&gt;
  
    &lt;/div&gt;
    &lt;button mat-raised-button (click)=&quot;exporter.exportTable('csv')&quot;&gt;Csv&lt;/button&gt;
  
    
    &lt;div class=&quot;mat-elevation-z8&quot; &gt;
   
      &lt;mat-table   #table matTableExporter  *ngIf=&quot;dataSource&quot; [dataSource]=&quot;dataSource&quot; #exporter=&quot;matTableExporter&quot;  &gt;
    
        &lt;ng-container  *ngFor =&quot; let column of displaycolumns;let i = index&quot;  [matColumnDef]=&quot;column&quot;&gt;
          &lt;mat-header-cell class=&quot;head&quot;  *cdkHeaderCellDef md-sort-header &gt;{{column}} &lt;/mat-header-cell&gt;
          &lt;mat-cell  class=&quot;colum&quot; *cdkCellDef=&quot;let row&quot;&gt; {{row[column]}} &lt;/mat-cell&gt; 
        &lt;/ng-container&gt;
        
        &lt;mat-header-row *matHeaderRowDef=&quot;displaycolumns&quot;&gt;&lt;/mat-header-row&gt;
         &lt;mat-row *matRowDef=&quot;let row; columns: displaycolumns;&quot;&gt; &lt;/mat-row&gt;
      &lt;/mat-table&gt;
  
    &lt;mat-paginator  [pageSizeOptions]=[5,10,50,100,200]&gt; &lt;/mat-paginator&gt;
    &lt;/div&gt;
  </code></pre>
  <h2>tableComponet.ts</h2>
  <pre><code>import { MyService } from './../services/my.service';
  import { Component, OnInit, ViewChild, Input } from '@angular/core';
  import { MatTableDataSource } from '@angular/material/table';
  import { MatPaginator } from '@angular/material/paginator';
  import { MatSort } from '@angular/material/sort';
  import { FieldConfig } from '../interfaces/FieldConfig.interfaces';
  import { MatTableExporterModule, MatTableExporterDirective } from 'mat-table-exporter';
  
  @Component({
    selector: 'app-table-list',
    templateUrl: './table-list.component.html',
    styleUrls: ['./table-list.component.css']
  })
  export class TableListComponent implements OnInit {
  
    constructor(private demoS: MyService) {}
  
    field: FieldConfig;
  
    // @ViewChild('#exporter') matTableExporter: MatTableExporterDirective;
    @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
    @ViewChild(MatSort, {static: false}) sort: MatSort;
    @Input() baseurl: string;
  
    public  config: any;
    private Pdata: any ;
    public displaycolumns: any;
  
    dataSource: MatTableDataSource&lt;any&gt;;
  
    public ngOnInit(): void {
      this.getConfigCall();
      this.getDataCall();
  
    }
  
  
    private getDataCall(): void {
      this.demoS.getData(this.baseurl).subscribe(
        (res) =&gt; {
          this.Pdata = res;
          this.dataSource = new MatTableDataSource(this.Pdata);
          this.dataSource.sort = this.sort;
  
          this.dataSource.paginator = this.paginator;
  
          console.log(this.dataSource);
        });
    }
  
    private getConfigCall(): void {
      this.demoS.getConfig(this.baseurl).subscribe((res) =&gt; {
         this.config = res ;
         this.displaycolumns = this.config
            .filter((item) =&gt; {
  
          if (item.label) {
              if (item.name !== 'Crud-Buttons') {
                if (item.list) {
  
                   if (item.list.hidden === true) {return false; } else { return true; }
                } else if (!item.list) {
                  return true; } else { return false; }
  
              }
          }
  
          if (!item.label) {
            item.label = item.name;
            // console.log(item);
            if (item.list.hidden === true) {return false; }
            return true;
          }
  
  
              })
            .map(item =&gt; item.label);
        //  console.log(this.displaycolumns);
  
      });
  
    }
  
    public applyFilter(filterValue: string) {
      filterValue = filterValue.trim();
      filterValue = filterValue.toLowerCase();
      this.dataSource.filter = filterValue;
    }
  
  }
  </code></pre>
  <p>Is there any solution?</p>