Angular, push form data object into observable array and loop the data in MatDataSource

Question

I want to do crud operations by saving the data in array object(IUser[]). So, I done adding form data to array and showing it in datatable and edit, delete is also completed by normal table with *ngFor.

Now I want to create the same using MatDataSource. I am trying since a day. Can anybody help me out. tq usermodel.ts

export class Usermodel {
    user: IUser= [];        
    userlist: any;

    constructor() { }

    addOject(user: IUser): void {
        this.user = user;
        this.userlist.push(this.user);
    }

    getUsers():  Observable<IUser[]> {
        return Observable.of(this.userlist);
    }
}

userdialogue.component.ts

export class UserdialogueComponent implements OnInit {

  userList: IUser[];

  // for table and pagination
  displayedColumns = ['userid', 'firstName', 'mobile', 'lastName'];
  dataSource = new MatTableDataSource<IUser>(this.userList);

  constructor(private dialog: MatDialog, private user: Usermodel) { }

  ngOnInit() {        
    this.user.getUsers()
      .subscribe(result => {
        this.userList = result;
        this.dataSource.data = this.userList;
      });
  }      

  openDialog(): void {
    const dialogConfig = new MatDialogConfig(); // for default settings
    dialogConfig.position = { right: '0px' };
    dialogConfig.disableClose = true;
    const dialogRef = this.dialog.open(UserformComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(result => {

      const userData = {
        id: this.generateRandom(),
        firstName: result.data.firstName,
        lastName: result.data.lastName,
        userid: result.data.userid,
        mobile: result.data.mobile,
        accsprofile: result.data.accsprofile
      };

      this.user.addOject(userData);
    });
  }

  editDialog(userData: IUser): void {
    const dialogConfig = new MatDialogConfig(); // for default settings
    dialogConfig.position = { right: '0px' };
    dialogConfig.disableClose = true;
    dialogConfig.data = userData;
    const dialogRef = this.dialog.open(UserformComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(result => {
      // console.log('Data inserted into records', result);
      if (this.isAnObject(result) && this.isEmptyObject(result)) {
        const userFormData = {
          id: result.data.id,
          firstName: result.data.firstName,
          lastName: result.data.lastName,
          userid: result.data.userid,
          mobile: result.data.mobile,
          accsprofile: result.data.accsprofile
        };

        this.user.updateUser(userFormData);
        console.log('update done', result);
      }
    });
  }      

  deleteDialog(userData: IUser): void {
    const dialogConfig = new MatDialogConfig(); // for default settings
    // dialogConfig.position = { right: '0px' };
    dialogConfig.disableClose = true;
    dialogConfig.data = { userid: userData.userid, id: userData.id };
    const dialogRef = this.dialog.open(UserdeleteComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(result => {          
      if (result) {
        this.user.deleteUser(result.id);
        console.log('deleted userid:', result.id);           
      }
    });
  }

  generateRandom(): number {
    return Math.floor((Math.random() * 100) + 1);
  }      
}

userdialogue.componet.html

<mat-table #table *ngIf [dataSource]="dataSource">
          <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.firstName}} </mat-cell>
          </ng-container>


          <ng-container matColumnDef="userid">
            <mat-header-cell *matHeaderCellDef> User ID </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.userid}} </mat-cell>
          </ng-container>


          <ng-container matColumnDef="mobile">
            <mat-header-cell *matHeaderCellDef> Mobile </mat-header-cell>
            <mat-cell *matCellDef="let user"> {{user.mobile}} </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>

Answer 1

Based on your comments and your code I made a small example showing you how to use Observables in a service so you can change, delete and subscribe to changes.

Just returning an Observable of an array wont work since the changes are not published to the subscriber. Use a BehaviorSubject instead. Here is a good answer on SO explaining the differences.

I removed code that was not necessary for the example and made a table showing you how to edit, delete or add new data, using hardcoded data since you already got your dialogs up and running, you just need to use the functions as an example.

Here is the stackblitz. I used the latest versions of Angular and Angular Material, since it was not clear for me which version you use. I hope this helps.