2

I have seen the following post :

ExpressionChangedAfterItHasBeenCheckedError with ngClass

In MY case I am doing the following :

<div>
    <div #prefix class="position-absolute h-100 d-flex align-items-center px-2">
      <ng-content select="[prefix]"></ng-content>
    </div>
    <input
      [style]="
        'padding-right:' +
        (suffix ? suffix.offsetWidth || 16 : 0) +
        'px; padding-left:' +
        (prefix ? prefix.offsetWidth || 16 : 0) +
        'px; height:' +
        height +
        ';'
      "
    />
</div>

so basically, if there is a div called prefix, I want to add some offset to my input.

Now, this in some case trigger a

NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'padding-right:16px; padding-left:40px; height:32px;'. Current value: 'padding-right:16px; padding-left:16px; height:32px;'

I can add a flag, and *ngIf on the input after the content is initialized in a setimeout.

  ngAfterContentInit(): void {
    setTimeout(() => {
       this.showInput = true;
       this.changeDetector.detectChanges();
    })
  }

but is there a better way without "polluting" with flags ?

Bobby
  • 4,372
  • 8
  • 47
  • 103
  • Hi Bobby, will it be possible for you, to update an example over ```stackblitz``` will have a look into it. – Himanshu Saxena Mar 22 '21 at 06:10
  • I find this blog post really good in debugging this issue: https://blog.angular-university.io/angular-debugging/ – AliF50 Mar 22 '21 at 12:48

0 Answers0