Display elements added to array without refreshing page in Angular

Question

I have created a function to add new data to an array. I can see that the data is being added to the array in the console but it not displayed on the browser.

How do I get the newly added data to be displayed without refreshing the screen in angular?

user.component.ts

UserData: User[] = [
    {
      id: 1,
      email: 'Mellie',
      firstName: 'Gabbott',
      lastName: 'mgabbott0@indiatimes.com',
      role: 'Female',
      status: 'Support'
    },
    {
      id: 2,
      email: 'Mellie',
      firstName: 'Gabbott',
      lastName: 'mgabbott0@indiatimes.com',
      role: 'Female',
      status: 'Support'
    },
  ];

 onEmpCreate(){
    var test: User = {
      id: 3,
      email: 'abc@test.com',
      firstName: 'Jim',
      lastName: 'Rambo',
      role: 'Doctor',
      status: 'Active'
    };
    this.UserData.push(test);
    console.log(this.UserData);
  }

user.component.html

Hello
<table mat-table [dataSource]="UserData">
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> Id </th>
        <td mat-cell *matCellDef="let user"> {{user.id}} </td>
      </ng-container>
      <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef> email </th>
        <td mat-cell *matCellDef="let user"> {{user.email}} </td>
      </ng-container>
      <ng-container matColumnDef="firstName">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let user"> {{user.firstName}} {{user.lastName}} </td>
      </ng-container>
      <ng-container matColumnDef="role">
        <th mat-header-cell *matHeaderCellDef> role </th>
        <td mat-cell *matCellDef="let user"> {{user.role}} </td>
      </ng-container>
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef> status </th>
        <td mat-cell *matCellDef="let user"> {{user.status}} </td>
      </ng-container>

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

  <button (click)="onEmpCreate()">Add User</button>

Basically I want the data added to the array to be displayed in the table.

Screenshot of table and console after clicking add user:

Answer 1

Was able to solve it using the duplicate mentioned in the comments as reference Angular + Material - How to refresh a data source (mat-table)

user.component.ts

dataSource = new MatTableDataSource<User>(this.dataService.UserData);

constructor(private dataService: DataserviceService) { }

onEmpCreate(){
    this.dataService.addUsers().subscribe((data: User[]) => {
      this.dataSource.data = data;
    });
  }

dataservice.service.ts

 UserData: User[] = [
    {
      id: 1,
      email: 'Mellie',
      firstName: 'Gabbott',
      lastName: 'mgabbott0@indiatimes.com',
      role: 'Female',
      status: 'Support'
    },
    {
      id: 2,
      email: 'Mellie',
      firstName: 'Gabbott',
      lastName: 'mgabbott0@indiatimes.com',
      role: 'Female',
      status: 'Support'
    },
  ];

addUsers(): Observable<User[]>  {
    var test: User = {
      id: 3,
      email: 'abc@test.com',
      firstName: 'Jim',
      lastName: 'Rambo',
      role: 'Doctor',
      status: 'Active'
    };
    this.UserData.push(test);
    let ids = this.UserData.map((obj)=> {
      return obj;
    });
    
    return of(ids);
  }