title: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'
body: <p>I know there are a lot of same questions already posted in stack-overflow and tried different solutions to avoid the run-time error but None of them are working for me.</p>
  
  <p><strong><a href="https://i.stack.imgur.com/4YHvI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4YHvI.png" alt="Error"></a></strong></p>
  
  <p><strong>Component and Html Code</strong></p>
  
  <pre><code>export class TestComponent implements OnInit, AfterContentChecked {
      @Input() DataContext: any;
      @Input() Position: any;
      sampleViewModel: ISampleViewModel = { DataContext: : null, Position: null };
      constructor(private validationService: IValidationService, private modalService: NgbModal, private cdRef: ChangeDetectorRef) {
      }
  
      ngOnInit() {
  
      }
      ngAfterContentChecked() {
  
              debugger;
              this.sampleViewModel.DataContext = this.DataContext;
              this.sampleViewModel.Position = this.Position;
  
      }
  
  
  &lt;div class="container-fluid sample-wrapper text-center" [ngClass]="sampleViewModel.DataContext?.Style?.CustomCssClass +' samplewidget-'+ sampleViewModel.Position?.Columns + 'x' + sampleViewModel.Position?.Rows"&gt;
       //some other html here
  &lt;/div&gt;
  </code></pre>
  
  <p><em>Please Note : This Component is loaded dynamically using DynamicComponentLoader</em></p>
  
  <p>After My trouble shooting I have identified couple of issues</p>
  
  <p>First of all this child component is loaded dynamically by using DynamicComponentResolver and passing the input values like below</p>
  
  <pre><code> ngAfterViewInit() {
      this.renderWidgetInsideWidgetContainer();
  
    }
  
  
    renderWidgetInsideWidgetContainer() {
      let component = this.storeFactory.getWidgetComponent(this.dataSource.ComponentName);
      let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component);
      let viewContainerRef = this.widgetHost.viewContainerRef;
      viewContainerRef.clear();
      let componentRef = viewContainerRef.createComponent(componentFactory);
      debugger;
      (&lt;IDataBind&gt;componentRef.instance).WidgetDataContext = this.dataSource.DataContext;
      (&lt;IDataBind&gt;componentRef.instance).WidgetPosition = this.dataSource.Position;
  
    }
  </code></pre>
  
  <p>Even If I changed my child component html like below I am getting this same error.Just add a angular ngclass attribute</p>
  
  <pre><code>&lt;div class="container-fluid ds-iconwidget-wrapper text-center" [ngClass]="Sample"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My databinding and everything are working fine.Do I need to do anything on parent component?
  I already tried all the lifecyle events in child component</p>