title: PrimeNG p-calendar - ExpressionChangedAfterItHasBeenCheckedError - howto handle
body: <p>I have a problem with PrimeNG <em>p-calendar</em> component (Angular version: "~4.0.0"): I use it inside a p-dialog like this:</p>
  
  <pre><code>&lt;p-dialog header="User Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true"&gt;
      &lt;p-calendar [(ngModel)]="dateOfBirth" [showIcon]="true"&gt;&lt;/p-calendar&gt;&lt;span&gt;{{dateOfBirth|date}}&lt;/span&gt;
  &lt;/p-dialog&gt;
  </code></pre>
  
  <p>When user <strong><em>selects the value in calendar</em></strong>, <strong>it throws an error</strong> in console log:</p>
  
  <pre><code>ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: '10'.
      at viewDebugError (:37885/libs/@angular/core/bundles/core.umd.js:8668) [angular]
  </code></pre>
  
  <p>But when I use '<strong><em>inline</em></strong>' option, <strong>it works perfect</strong>:</p>
  
  <pre><code>&lt;p-dialog header="User Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true"&gt;
      &lt;p-calendar [(ngModel)]="dateOfBirth" [inline]="true"&gt;&lt;/p-calendar&gt;&lt;span&gt;{{dateOfBirth|date}}&lt;/span&gt;
  &lt;/p-dialog&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/0DMt4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0DMt4.png" alt="enter image description here"></a></p>
  
  <p>Here is the code of the component (trimmed a little):</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Router, ActivatedRoute } from '@angular/router';
  
  
  @Component({
      moduleId: module.id,    
      selector: 'user-details',
      templateUrl: './user-details.html'  
  })
  
  export class UserDetailComponent {     
      dateOfBirth: Date;
  
      constructor(
         private route: ActivatedRoute,
         private router: Router
      ) {}
  
      onDateSelect(value: Date) {
          console.log("onDateSelect");
      }
  
      onBlur(value: Date) {
          console.log("onBlur");
      }
  }
  </code></pre>
  
  <p>Has anyone got any ideas about how to handle this issue? I appreciate your try, anyway, Thanks!</p>
  
  <hr>
  
  <p>I've created a <a href="https://embed.plnkr.co/ec5RQr/" rel="nofollow noreferrer">plunker p-calendar issue</a> project to demonstrate the issue.</p>