ExpressionChangedAfterItHasBeenCheckedError: angular

I am building a page that has tabs - those tabs are dynamics from the DB but to make it simple I defined it manually.

Each tab has a the same radio buttons (there is also a save button and more but to make it simple - I removed it).

When I choose one of the radio buttons I am getting this error

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ui-state-active: false'. Current value: 'ui-state-active: true'.
at viewDebugError (core.js:9817)

Also after clicking it again there is no error

Basically the question is how to create radio buttons inside a dynamic tab.

I read this: https://blog.angular-university.io/angular-debugging/

and this: https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

but since I am new to Angular - I can't understand how to solve my problem.

Here is the full code

 <p-tabView> <p-tabPanel [header]="category" *ngFor="let category of categoriesList; let i = index" [selected]="i == 0"> <br> <div class="ui-grid-row"> <h3>Service experience for {{category}}</h3> </div> <div class="ui-grid-row"> <div class="ui-g-6"> <div class="ui-g-12"> <p-radioButton name="quickFeedBackGrade" value="1" label="Very poor" [(ngModel)]="categoryGrade" ></p-radioButton> </div> <div class="ui-g-12"> <p-radioButton name="quickFeedBackGrade" value="2" label="Poor" [(ngModel)]="categoryGrade" ></p-radioButton> </div> <div class="ui-g-12"> <p-radioButton name="quickFeedBackGrade" value="3" label="Good" [(ngModel)]="categoryGrade" ></p-radioButton> </div> <div class="ui-g-12"> <p-radioButton name="quickFeedBackGrade" value="4" label="Very good" [(ngModel)]="categoryGrade" ></p-radioButton> </div> <div class="ui-g-12"> <p-radioButton name="quickFeedBackGrade" value="5" label="Ecxelent" [(ngModel)]="categoryGrade" ></p-radioButton> </div> </div> </div> </p-tabPanel> </p-tabView> 

and the tab.ts holds only the tab building

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-tabs', templateUrl: './tabs.component.html', styleUrls: ['./tabs.component.css'] }) export class TabsComponent implements OnInit { categoriesList: any = ['tab1' , 'tab2' , 'tab3' , 'tab4' ]; constructor() { } ngOnInit() { } }