import { Injectable } from '@angular/core';
import { Observable} from 'rxjs';
import {Customers} from './ICustomer';

@Injectable({
  providedIn: 'root'
})
export class DataServiceService {

  customers: Customers[] = [
    {
    firstName: 'Matt',
    lastName: 'Osman'
    },
    {firstName: 'Josh',
    lastName: 'Allen'}
];

// get customers from the customer array
public getCustomers(): any {
  const customersObservable = new Observable(observer => {
    setTimeout(() => {
      observer.next(this.customers);
    }, 1000);
  });
  return customersObservable;
}
// add customers to the customer array
public addCustomers(data: any): any {
  this.customers.push(data);
  this.customers = [...this.customers];
}
constructor() {}
}

export interface Customers {
    firstName: string;
    lastName: string;
  }

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatTable} from '@angular/material';
import {DataServiceService} from '../data-service.service';
import {Customers} from '../ICustomer';
import {MatDialog} from '@angular/material/dialog';
import { AddCustomerModalComponent } from '../add-customer-modal/add-customer-modal.component';

@Component({
  selector: 'app-customer-data-table',
  templateUrl: './customer-data-table.component.html',
  styleUrls: ['./customer-data-table.component.css']
})
export class CustomerDataTableComponent implements OnInit {

  displayedColumns: string[] = ['firstName', 'lastName'];
  dataSource: Customers[] = [];

  firstName: string;
  lastName: string;

  // needed to update the data in the table after adding
  @ViewChild(MatTable, {static: false}) table: MatTable<any>;

  constructor(private customerService: DataServiceService, public dialog: MatDialog) { }

  numEmployees() {
    return this.dataSource.length;
  }
// this handles the dialog open/close events
  openDialog(): void {
    const dialogRef = this.dialog.open(AddCustomerModalComponent, {
      width: '75%',
      data: {firstName: this.firstName, lastName: this.lastName}
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('the dialog was closed');
      this.customerService.addCustomers(result); **<-- the customers[] continues updating but NOT the datasource observing it**
      this.table.renderRows();
    });
  }
  // subscribe to the dataService to connect to the customer list.
  ngOnInit() {
    const customersObservable = this.customerService.getCustomers();
    customersObservable.subscribe((customersData: Customers[]) => {
      this.dataSource = customersData; **<--- THIS UPDATES ONLY THE FIRST TIME THEN STOPS UPDATING WHEN NEW CUSTOMERS ARE ADDED**
    });
    }
}

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Component, Inject } from '@angular/core';
import {Customers} from '../ICustomer';

@Component({
  selector: 'app-add-customer-modal',
  templateUrl: './add-customer-modal.component.html',
  styleUrls: ['./add-customer-modal.component.css']
})
export class AddCustomerModalComponent {


  constructor( public dialogRef: MatDialogRef<AddCustomerModalComponent>,
               @Inject(MAT_DIALOG_DATA) public data: Customers) { }

  onCancel(): void {
    this.dialogRef.close();
  }
}