I'm facing an issue where data added to an array is not being displayed on the browser, even though I can see it in the console. How can I ensure that the newly added data shows up without refreshing the screen in Angular?
user.component.ts
UserData: User[] = [
{
id: 1,
email: 'Mellie',
firstName: 'Gabbott',
lastName: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b767c7a7979746f6f2b5b72757f727a6f72767e6835787476">[email protected]</a>',
role: 'Female',
status: 'Support'
},
{
id: 2,
email: 'Mellie',
firstName: 'Gabbott',
lastName: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e9e3e5e6e6ebf0f0b4c4edeae0ede5f0ede9e1f7aae7ebe9">[email protected]</a>',
role: 'Female',
status: 'Support'
},
];
onEmpCreate(){
var test: User = {
id: 3,
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aecfcccdeedacbddda80cdc1c3">[email protected]</a>',
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>
... // Rest of the table code
</table>
<button (click)="onEmpCreate()">Add User</button>
My goal is to have the newly added data from the array display in the table seamlessly.
Screenshot of table and console after clicking add user: https://i.sstatic.net/q9piy.png