Angular ExpressionChangedAfterItHasBeenCheckedError while using random numbers in progress bar - html

Question

I get this ExpressionChangedAfterItHasBeenCheckedError when i am using random numbers progress bar in my html grid table.It says "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: some value. Current value: some value.". Someone please help me with the issue.
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLinkActive="active">
<button class="btn btn-primary" (click)="goToAddUser()">Add User</button>
</a>
</li>
</ul>
</nav>
<div class="panel panel-primary">
<div class="panel-heading">
<h2>User List</h2>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Actions</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users | async">
<td>{{user.firstname}}</td>
<td>{{user.lastname}}</td>
<td>{{user.email}}</td>
<td>
<button (click)="goToEditUser(user.id)" class="btn btn-info">Update</button>
<button (click)="deleteUser(user.id)" class="btn btn-danger" style="margin-left: 10px">Delete</button>
<button (click)="goToViewUser(user.id)" class="btn btn-info" style="margin-left: 10px">Details</button>
</td>
<td>
<mat-progress-bar [value]="number" style="margin-right: 300px"></mat-progress-bar>
{{ number }}%
</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

The getRandomNumber() return value changes after angular change detection already checked its value. To understand the error better, read this article:
https://hackernoon.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4
Here's one solution, make a class field called randomNumber and assign it to the value of getRandomNubmer().
class YourComponentClass { randomNumber : number = this.getRandomNumber(); ... }
In Html
<td> <mat-progress-bar [value]="randomNumber" style="margin-right: 300px">
</mat-progress-bar> {{ randomNumber }} </td>
if you want to change your randomNumber just create a click event handler to reassign randomNumber to getRandomNumber() method

Answer 2

You need to manually check for changes.
// Import
import { Component, OnInit, ChangeDetectorRef } from '#angular/core';
// Inject
constructor(private cd: ChangeDetectorRef)
// Call after making changes in component
someMethod() {
this.cd.detectChanges();
}