title: How do I call a function in a class from another class in Angular 6?
body: <p>Here's my code:</p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { AuthService } from '../core/auth.service';
  import { MatRadioButton, MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
  import { SelectionModel } from '@angular/cdk/collections';
  import { OrdersService } from '../orders.service';
  
  export interface DataTableItem {
    ordersn: string;
    order_status: string;
    update_time: number;
  }
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
  })
  
  export class HomeComponent implements OnInit {
    radioValue: number;
    dataSource = new UserDataSource(this.orderService);
    selection = new SelectionModel&lt;any&gt;(true, []);
  
    // Sorting and pagination
    @ViewChild(MatSort) sort: MatSort;
    @ViewChild(MatPaginator) paginator: MatPaginator;
  
    // Columns displayed in the table. Columns IDs can be added, removed, or reordered.
    displayedColumns = ['ordersn', 'order_status', 'update_time'];
  
    // Filter
    applyFilter(filterValue: string) {
      this.dataSource.filter = filterValue.trim().toLowerCase();
    }
  
    // Whether the number of selected elements matches the total number of rows.
    isAllSelected() {
      const numSelected = this.selection.selected.length;
      const numRows = this.dataSource.data.length;
      return numSelected === numRows;
    }
  
    // Selects all rows if they are not all selected; otherwise clear selection.
    masterToggle() {
      this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row =&gt; this.selection.select(row));
    }
  
    constructor(public auth: AuthService, private orderService: OrdersService) {
    }
  
    onSelectionChange(radioSelection: MatRadioButton) {
      this.radioValue = radioSelection.value;
      console.log(this.radioValue);
    }
  
    ngOnInit() {
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    }
  }
  
  export class UserDataSource extends MatTableDataSource&lt;any&gt; {
    constructor(private orderService: OrdersService) {
      super();
  
      this.orderService.GetOrdersList().subscribe(d =&gt; {
        this.data = d.orders;
      });
    }
  
    radioFilter() {
      const array = [];
  
      this.orderService.GetOrdersList().subscribe(d =&gt; {
        for (const entry of d.orders) {
          if (entry.order_status === 'READY_TO_SHIP') {
            array.push(entry);
          }
        }
  
        this.data = array;
  
        console.log(array);
      });
    }
  }
  </code></pre>
  
  <p>I'm trying to call <code>radioFilter()</code> from <code>HomeComponent</code>. What I've tried: </p>
  
  <ul>
  <li>Implementing <code>@ViewChild</code> in <code>HomeComponent</code> but I would get this error: <strong>Class 'UserDataSource' used before its declaration</strong>. </li>
  <li>Importing <code>UserDataSource</code> and then added to the constructor in <code>HomeComponent</code>. I would get this error: <strong>Getting Uncaught Error: Can't resolve all parameters for HomeComponent</strong></li>
  </ul>
  
  <p>I'm kind of out of anymore idea, thus any suggestion is much appreciated. Thanks!</p>