title: Angular 7: Dynamically add rows to Material data table
body: <p>How do I add data which I get from a service into my data table dynamically?</p>
  
  <p>I get data from a dialog with the service AuthenticationService. My first thought was to use <code>this.dataSource.push(this.transaction);</code>, which doesn't work.</p>
  
  <p>This is how I tried to do it:</p>
  
  <pre><code>export class TransactionPoolComponent implements OnInit {
    displayedColumns = ['sender', 'recipient', 'amount', 'fee'];
    dataSource = ELEMENT_DATA;
    transaction: Transaction;
  
  
    constructor(private _AS: AuthenticationService) {
    }
  
    ngOnInit() {
      this._AS.transaction$.subscribe( transaction =&gt; {
        this.transaction = transaction;
        this.dataSource.push(this.transaction);
        console.log(this.transaction);
        }
      );
    }
  }
  
  export interface Transaction {
    sender: number;
    recipient: string;
    amount: number;
    fee: string;
  }
  
  const ELEMENT_DATA: Transaction[] = [
  ];
  </code></pre>