title: ExpressionChangedAfterItHasBeenCheckedError: angular
body: <p>I am building a page that has tabs - those tabs are dynamics from the DB but to make it simple I defined it manually.</p>
  
  <p>Each tab has a the same radio buttons (there is also a save button and more but to make it simple - I removed it).</p>
  
  <p>When I choose one of the radio buttons I am getting this error </p>
  
  <blockquote>
    <p>ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ui-state-active: false'. Current value: 'ui-state-active: true'.<br>
    at viewDebugError (core.js:9817)</p>
  </blockquote>
  
  <p>Also after clicking it again there is no error </p>
  
  <p>Basically the question is how to create radio buttons inside a dynamic tab.</p>
  
  <p>I read this: <a href="https://blog.angular-university.io/angular-debugging/" rel="nofollow noreferrer">https://blog.angular-university.io/angular-debugging/</a></p>
  
  <p>and this: <a href="https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4" rel="nofollow noreferrer">https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4</a></p>
  
  <p>but since I am new to Angular - I can't understand how to solve my problem.</p>
  
  <p>Here is the full code </p>
  
  <pre><code>  &lt;p-tabView&gt;
    &lt;p-tabPanel [header]="category" *ngFor="let category of categoriesList; let i = index" [selected]="i == 0"&gt;
      &lt;br&gt;
  
      &lt;div class="ui-grid-row"&gt;
        &lt;h3&gt;Service experience for {{category}}&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="ui-grid-row"&gt;
        &lt;div class="ui-g-6"&gt;
          &lt;div class="ui-g-12"&gt;
            &lt;p-radioButton name="quickFeedBackGrade" value="1" label="Very poor"
                       [(ngModel)]="categoryGrade" &gt;&lt;/p-radioButton&gt;
          &lt;/div&gt;
          &lt;div class="ui-g-12"&gt;
            &lt;p-radioButton name="quickFeedBackGrade" value="2" label="Poor"
            [(ngModel)]="categoryGrade" &gt;&lt;/p-radioButton&gt;
          &lt;/div&gt;
          &lt;div class="ui-g-12"&gt;
            &lt;p-radioButton name="quickFeedBackGrade" value="3" label="Good"
            [(ngModel)]="categoryGrade" &gt;&lt;/p-radioButton&gt;
          &lt;/div&gt;
          &lt;div class="ui-g-12"&gt;
            &lt;p-radioButton name="quickFeedBackGrade" value="4" label="Very good"
            [(ngModel)]="categoryGrade" &gt;&lt;/p-radioButton&gt;
          &lt;/div&gt;
          &lt;div class="ui-g-12"&gt;
            &lt;p-radioButton name="quickFeedBackGrade" value="5" label="Ecxelent"
            [(ngModel)]="categoryGrade" &gt;&lt;/p-radioButton&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/p-tabPanel&gt;
  &lt;/p-tabView&gt;
  </code></pre>
  
  <p>and the tab.ts holds only the tab building</p>
  
  <pre><code>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() {
    }
  }
  </code></pre>