Beautiful ExpressionChangedAfterItHasBeenCheckedError

Question

Beautiful ExpressionChangedAfterItHasBeenCheckedError

I need your help

Input field where I can enter a Student email or IAM, which will be added to a string array
List displaying all the students I have added, using a for loop as shown below
Delete button to remove a student from the array

The list has a specified maximum height, and I want to implement a feature that checks if the content exceeds this height. If it does, display a "read more" button; otherwise, hide it.

While the initial implementation works fine, I am facing an issue. When the number of students added causes the total height to exceed the maximum limit, the "read more" button appears correctly. However, upon deleting some students and bringing the total height back under the limit, an error occurs.

I prefer not to use setTimeout unless absolutely necessary

<div class="input-row">
  <input #studentsInput
         (keypress)="onKeyPressStudent($event, studentsInput)"
         class="input-field"
         placeholder="Student Email or IAM"
         required
         type="text">
</div>

<ul #listStudents
    [ngClass]="{ 'scrollable': studentsScroll }"
    class="list-row">
  <li *ngFor="let student of students; index as i"
      class="list-item">
    {{ student }}

    <span (click)="deleteStudent(i)"
          class="material-icons">
      close
    </span>
  </li>
</ul>

<div *ngIf="listStudents.offsetHeight < listStudents.scrollHeight"
     class="more">
  <span class="material-icons">
    more_horiz
  </span>
</div>

export class Component implements OnInit {
  public students: string[] = [];
  public studentsScroll = false;

  public ngOnInit(): void {
  }

  public onKeyPressStudent(
    event: KeyboardEvent,
    studentsInput: HTMLInputElement,
  ): void {
    if (event.key === 'Enter') {
      if (studentsInput.checkValidity()) {
        this.students.push(studentsInput.value);
        studentsInput.value = '';
      } else {
        this.toastrService.error('Please enter a valid Email Address!');
      }
    }
  }

  public deleteStudent(index: number): void {
    this.students.splice(index, 1);
  }

  public toggleStudentScroll(): void {
    this.studentsScroll = !this.studentsScroll;
  }
}

Console Error

css angular typescript

Answer 1

Answer №1

When the deleteStudent() function is called, it mutates the students array using splice, resulting in a change in the number of list items (li) due to the *ngFor directive being used. This leads to property changes in the listStudents element (offsetHeight, scrollHeight) that are bound to the *ngIf directive.

As a result, the expression "listStudents.offsetHeight < listStudents.scrollHeight" is altered after the change detection process triggered by the mutation of the students array is completed in the template.

To resolve this issue, you must ensure that the check for showing/hiding the button occurs outside the initial change detection cycle (which is why setTimeout works as it creates its own change detection cycle).

You can achieve this by utilizing the afterContentChecked lifeCycle hook: https://angular.io/api/core/AfterContentChecked

Determine if the "showmore" should be visible in the DOM (true) or not (false) by evaluating the statement inside that hook:

<div class="input-row">
  <input #studentsInput
         (keypress)="onKeyPressStudent($event, studentsInput)"
         class="input-field"
         placeholder="Student Email or IAM"
         required
         type="text">
</div>

<ul #listStudents
    [ngClass]="{ 'scrollable': studentsScroll }"
    class="list-row">
  <li *ngFor="let student of students; index as i"
      class="list-item">
    {{ student }}

    <span (click)="deleteStudent(i)"
          class="material-icons">
      close
    </span>
  </li>
</ul>

<div *ngIf="showmore" class="more">
  <span class="material-icons">
    more_horiz
  </span>
</div>

In TypeScript:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild('listStudents', { static: true }) listStudents: ElementRef;
  private listStudentsNativeElement: HTMLElement;

  public showmore: boolean = false;

  public students: string[] = [];
  public studentsScroll = false;

  public ngOnInit(): void {
  }

  public onKeyPressStudent(
    event: KeyboardEvent,
    studentsInput: HTMLInputElement,
  ): void {
    if (event.key === 'Enter') {
      if (studentsInput.checkValidity()) {
        this.students.push(studentsInput.value);
        studentsInput.value = '';
      } else {
        console.log('Please enter a valid Email Address!');
      }
    }
  }

  public deleteStudent(index: number): void {
    this.students.splice(index, 1);
  }

  public toggleStudentScroll(): void {
    this.studentsScroll = !this.studentsScroll;
  }

  ngAfterViewInit() {
    this.listStudentsNativeElement = this.listStudents.nativeElement;
  }

  ngAfterContentChecked() {
    if (this.listStudentsNativeElement) {
      this.showmore = (this.listStudentsNativeElement.offsetHeight < this.listStudentsNativeElement.scrollHeight);
    }
  }
}

Additional Notes:

We need to capture the reference to the listStudents nativeElement after full initialization (ngAfterViewInit)
We still need to verify if the listStudents nativeElement is defined since ngAfterContentChecked fires before view initialization

Alternatively, you can use setTimeout or RequestAnimationFrame API:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild('listStudents', { static: true }) listStudents: ElementRef;
  private listStudentsNativeElement: HTMLElement;

  public showmore: boolean = false;
  public students: string[] = [];
  public studentsScroll = false;

  public ngOnInit(): void {
  }

  public onKeyPressStudent(
    event: KeyboardEvent,
    studentsInput: HTMLInputElement,
  ): void {
    if (event.key === 'Enter') {
      if (studentsInput.checkValidity()) {
        this.students.push(studentsInput.value);
        studentsInput.value = '';
        this.checkForShowMore();
      } else {
        console.log('Please enter a valid Email Address!');
      }
    }
  }

  public deleteStudent(index: number): void {
    this.students.splice(index, 1);
    this.checkForShowMore();
  }

  public toggleStudentScroll(): void {
    this.studentsScroll = !this.studentsScroll;
  }

  checkForShowMore() {
    requestAnimationFrame(()=>{
      this.showmore = (this.listStudentsNativeElement.offsetHeight < this.listStudentsNativeElement.scrollHeight);
    })
  }

  ngAfterViewInit() {
    this.listStudentsNativeElement = this.listStudents.nativeElement;
  }

}

Answer 2

When the deleteStudent() function is called, it mutates the students array using splice, resulting in a change in the number of list items (li) due to the *ngFor directive being used. This leads to property changes in the listStudents element (offsetHeight, scrollHeight) that are bound to the *ngIf directive.

As a result, the expression "listStudents.offsetHeight < listStudents.scrollHeight" is altered after the change detection process triggered by the mutation of the students array is completed in the template.

To resolve this issue, you must ensure that the check for showing/hiding the button occurs outside the initial change detection cycle (which is why setTimeout works as it creates its own change detection cycle).

You can achieve this by utilizing the afterContentChecked lifeCycle hook: https://angular.io/api/core/AfterContentChecked

Determine if the "showmore" should be visible in the DOM (true) or not (false) by evaluating the statement inside that hook:

<div class="input-row">
  <input #studentsInput
         (keypress)="onKeyPressStudent($event, studentsInput)"
         class="input-field"
         placeholder="Student Email or IAM"
         required
         type="text">
</div>

<ul #listStudents
    [ngClass]="{ 'scrollable': studentsScroll }"
    class="list-row">
  <li *ngFor="let student of students; index as i"
      class="list-item">
    {{ student }}

    <span (click)="deleteStudent(i)"
          class="material-icons">
      close
    </span>
  </li>
</ul>

<div *ngIf="showmore" class="more">
  <span class="material-icons">
    more_horiz
  </span>
</div>

In TypeScript:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild('listStudents', { static: true }) listStudents: ElementRef;
  private listStudentsNativeElement: HTMLElement;

  public showmore: boolean = false;

  public students: string[] = [];
  public studentsScroll = false;

  public ngOnInit(): void {
  }

  public onKeyPressStudent(
    event: KeyboardEvent,
    studentsInput: HTMLInputElement,
  ): void {
    if (event.key === 'Enter') {
      if (studentsInput.checkValidity()) {
        this.students.push(studentsInput.value);
        studentsInput.value = '';
      } else {
        console.log('Please enter a valid Email Address!');
      }
    }
  }

  public deleteStudent(index: number): void {
    this.students.splice(index, 1);
  }

  public toggleStudentScroll(): void {
    this.studentsScroll = !this.studentsScroll;
  }

  ngAfterViewInit() {
    this.listStudentsNativeElement = this.listStudents.nativeElement;
  }

  ngAfterContentChecked() {
    if (this.listStudentsNativeElement) {
      this.showmore = (this.listStudentsNativeElement.offsetHeight < this.listStudentsNativeElement.scrollHeight);
    }
  }
}

Additional Notes:

We need to capture the reference to the listStudents nativeElement after full initialization (ngAfterViewInit)
We still need to verify if the listStudents nativeElement is defined since ngAfterContentChecked fires before view initialization

Alternatively, you can use setTimeout or RequestAnimationFrame API:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild('listStudents', { static: true }) listStudents: ElementRef;
  private listStudentsNativeElement: HTMLElement;

  public showmore: boolean = false;
  public students: string[] = [];
  public studentsScroll = false;

  public ngOnInit(): void {
  }

  public onKeyPressStudent(
    event: KeyboardEvent,
    studentsInput: HTMLInputElement,
  ): void {
    if (event.key === 'Enter') {
      if (studentsInput.checkValidity()) {
        this.students.push(studentsInput.value);
        studentsInput.value = '';
        this.checkForShowMore();
      } else {
        console.log('Please enter a valid Email Address!');
      }
    }
  }

  public deleteStudent(index: number): void {
    this.students.splice(index, 1);
    this.checkForShowMore();
  }

  public toggleStudentScroll(): void {
    this.studentsScroll = !this.studentsScroll;
  }

  checkForShowMore() {
    requestAnimationFrame(()=>{
      this.showmore = (this.listStudentsNativeElement.offsetHeight < this.listStudentsNativeElement.scrollHeight);
    })
  }

  ngAfterViewInit() {
    this.listStudentsNativeElement = this.listStudents.nativeElement;
  }

}

Beautiful ExpressionChangedAfterItHasBeenCheckedError

Answer №1

Similar questions

TypeScript encountered an error with code TS2305, stating that the module "constants" does not have any exported members

Dealing with multiple validation error messages in Angular Material 2

Obtain the value of the background image's URL

Uninitialized Array Member in Angular 8

How can you refresh the .replaceWith method in jQuery?

Struggling to align a box perfectly to the right within an AppBar

Looking for a way to dynamically append a child element within another child

Error encountered when initializing a variable within the constructor of a TypeScript file in Angular 4

Leverage the power of Material UI makeStyles in conjunction with Typescript

Tips for customizing the appearance of Java FX TableView column headers with CSS

Adding click functionality to dynamically generated list items in jQuery and HTML

The back button functionality in Android cannot be altered or overridden using JavaScript

`MongoDb aggregation performance degradation with numerous collections (join)`

Achieving Centered Items with CSS Flexbox and Positioning

Best Practices for Variable Initialization in Stencil.js

Update the positioning of the element to center instead of the default top left origin using jQuery

The wonders of jQuery popup windows

Access an Angular 2 component through an email hyperlink including querystring parameters

What is the best way to set the minDate and maxDate of the NgbDatePicker in the main component so that the settings can be applied

What is the process for defining child routes in Angular 2.0 for Dart?