Error: ExpressionChangedAfterItHasBeenCheckedError varaible Angular?

Question

I have the following template element:

  <input
   class="form-check-input"
   type="radio"
   name="radio_{{ id }}"
   id="{{ id }}">

And component is:

  import * as uuid from 'uuid';
  public get id(): number {
       return uuid.v4();
  }

I get this error message:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '103cb048-c966-4b76-b795-31dd2234204c'. Current value:

The component has default strategy.

'a04eba4a-06b6-400b-af6c-e9afe3040919'.

Answer 1

With every change detection cycle, it will call the id() getter, and thus generating a new id. This is most likely not correct, because it will also cause the id and name attribute to be different on the input. I think you are looking for this:

import * as uuid from 'uuid';
  
public id: string = uuid.v4();

I can however advice you to use the OnPush change detection strategy, as it will give your application a performance boost. As well as making the change detection more logical