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:
