In my project, I'm using Angular6 with angular-material designs. In my table, I have to add new data row into an existing table without refreshing the whole table. Here is what I have tried so far,

`issue-data.component.ts`

export class IssueDataComponent implements OnInit {

  addStatus() {
    const dialogConfig = new MatDialogConfig();

    this.modelData = {
      list: this.IssueDataDTOList,
      type: "add",
      toBeEditedDTO: null
    }

    dialogConfig.data = this.modelData;
    dialogConfig.disableClose = true;//disable default close operation
    dialogConfig.width = '30%';

    this.dialog.open(EditIssueDataComponent, dialogConfig).afterClosed().subscribe(
      res => {
        //updating data source array
        this.updatingDataSource(res);
      }
    )
  }

  updatingDataSource(result) {
    this.dataSource = new MatTableDataSource(result);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

}

`edit-issue-data.component.ts`

export class EditIssueDataComponent implements OnInit {

  statusForm: FormGroup;
  IssueDataDTOList = [];
  statusArray: string[] = ['Active', 'Inactive'];
  isStatusExist = false;
  dataFromParent = { list: [], type: '', toBeEditedDTO: { id: 0, name: '', backlog: '', status: '' } };

  constructor(private matDialogRef: MatDialogRef<DefineCalenderComponent>,
    private formBuilder: FormBuilder,
    private issueService: IssueService,
    private snackBar: MatSnackBar,
    public dialogRef: MatDialogRef<any>,
    @Inject(MAT_DIALOG_DATA) public data: any, ) {
  }

  ngOnInit() {
    this.dataFromParent = this.data;
    this.IssueDataDTOList = this.dataFromParent.list;
      this.statusForm = new FormGroup({
        name: new FormControl('', [Validators.required]),
        backlog: new FormControl('', [Validators.required]),
        // status: new FormControl('', [Validators.required]),
      });
  }

  addStatus() {
    const IssueDataDTO = {};
      IssueDataDTO['name'] = this.statusForm.value.name;
      IssueDataDTO['backlog'] = this.statusForm.value.backlog;
      IssueDataDTO['status'] = "ACTIVE";

    this.issueService.updateIssueData(IssueDataDTO).subscribe(res => {
      this.IssueDataDTOList.push(res);
      this.cancelPopup();
    }
    );
  }

Following is my service class,

export class IssueService {
    public statusesId; 
    private apiURL = environment.apiUrl;


    constructor(private http: HttpClient) {
    }

    issueDataForm: FormGroup = new FormGroup({
        statusesId: new FormControl(-1), 
        issueStatus: new FormControl('', Validators.required),
        showInBacklog: new FormControl(''),
        status: new FormControl('')
      });
 issueStatusDTOList= [];
UpdateStatus(data): Observable<any> {
        return this.http.post<any>(this.apiURL + 'saveStatus', data);
      }}

but when I'm trying to add new data the result is as follows,

All data are gone and screen displays only the data I have added recently.

Update as requested:

after adding this.dataSource.data = [...this.dataSource.data, result]; to my datasource functionality is working but there is an exeption as follows,

ERROR TypeError: Cannot read property 'concat' of undefined at IssueDataComponent../src/app/content/basic-data/issue-data/issue-data.component.ts.IssueDataComponent.updatingDataSource (issue-data.component.ts:188) at SafeSubscriber._next (issue-data.component.ts:180)

my datasource,