title: How can I console.log the selected option from angular Material form and table? ANGULAR 4
body: <p>I have a table that I made with Angular Material. It contains some data made as an object in the ts file. See the code below:</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {DataSource} from '@angular/cdk/collections';
  import {Observable} from 'rxjs/Observable';
  import 'rxjs/add/observable/of';
  
  @Component({
    selector: 'app-accounts',
    templateUrl: './accounts.component.html',
    styleUrls: ['./accounts.component.sass']
  })
  
  
  export class AccountsComponent {
    displayedColumns = ['Account Number', 'Account Name', 'Acctype1', 'Acctype2', 'Acctype3'];
    dataSource = new ExampleDataSource()
  
    acctypes = [
    {value: 'Tax', viewValue: 'Tax'},
    {value: 'Liabilities', viewValue: 'Liabilities'},
    {value: 'Enable', viewValue: 'Enable'},
    {value: 'Income Statement', viewValue: 'Income Statement'}
   ];
  
   onSelect(){
     console.log(DataSource)
   } 
  }
  
  export interface Element {
    AccountNumber: string;
    AccountName: string;
    Acctype1: string;
    Acctype2: string;
    Acctype3: string;
  }
  
  const data: Element[] = [
    {AccountNumber: '001' , AccountName: 'Pepsi', Acctype1: 'H', Acctype2: 'D', Acctype3: 'P'},
    { AccountNumber: '002', AccountName: 'Coke', Acctype1: 'He', Acctype2: 'G', Acctype3: 'Wm'},
    { AccountNumber: '003', AccountName: 'Fanta', Acctype1: 'Li', Acctype2: 'Dk', Acctype3: 'R'},
    { AccountNumber: '004', AccountName: 'Faxe Kondi', Acctype1: 'Be', Acctype2: 'B', Acctype3: 'K'},
    { AccountNumber: '005', AccountName: 'Dr Pepper', Acctype1: 'B', Acctype2: 'Pn', Acctype3: 'M'},
    { AccountNumber: '006', AccountName: 'Mars', Acctype1: 'C', Acctype2: 'Mw', Acctype3: 'Xnm'},
    { AccountNumber: '007', AccountName: 'Snickers', Acctype1: 'N', Acctype2: 'D', Acctype3: 'P'},
    { AccountNumber: '008', AccountName: 'Converse', Acctype1: 'O', Acctype2: 'Z', Acctype3: 'Wc'},
    { AccountNumber: '009', AccountName: 'Adidas', Acctype1: 'F', Acctype2: 'Q', Acctype3: 'O'},
    { AccountNumber: '010', AccountName: 'Nike', Acctype1: 'Ne', Acctype2: 'Z', Acctype3: 'B'},
  
  ];
  
  export class ExampleDataSource extends DataSource&lt;any&gt; {
  
    connect(): Observable&lt;Element[]&gt; {
      return Observable.of(data);
    }
    disconnect() {}
  }
  </code></pre>
  
  <p>What I want to do is console.log all the data from the table and dropdown menu. Currently, when I select an option, the console logs</p>
  
  <pre><code>ƒ DataSource() {
      }
  </code></pre>
  
  <p>which obviously isn't what I need.</p>
  
  <p>What am I doing wrong? This is the relevant HTML for the table:</p>
  
  <pre><code>&lt;div id='table-container'&gt;
    &lt;form id='accForm'&gt;
    &lt;mat-table #table [dataSource]="dataSource"&gt;
  
      &lt;ng-container matColumnDef="Account Number"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Account Number &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{element.AccountNumber}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="Account Name"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; Account Name &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{element.AccountName}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="Acctype1"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; 2016/17 Account Type &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element" id="accType"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-select name= 'acctype_id' [(ngModel)]="element.accType1" (change)="onSelect()" placeholder="Select Type"&gt;
                &lt;mat-option *ngFor="let acctype of acctypes" [value]="acctype.value"&gt;
                  {{ acctype.viewValue }}
                &lt;/mat-option&gt;
              &lt;/mat-select&gt;
            &lt;/mat-form-field&gt;
          &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="Acctype2"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; 2015/16 Account Type &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{element.Acctype2}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="Acctype3"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt; 2014/15 Account Type &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let element"&gt; {{element.Acctype3}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
        &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've been stuck on this for days, any help would be appreciated</p>