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

What measures can be taken to stop LESS partials from compiling independently?

Struggling to track down the issue in my ts-node express project (Breakpoint being ignored due to generated code not being located)

Having trouble running ng e2e on TeamCity with an @angular/cli script that refuses to cooperate

Looping issue with ForEach in Typscript with Firebase Functions

NodeJs backend encounters undefined object due to FormData format request sent from Angular frontend

Updating a string's value in Angular based on user input

Discovering the origins of the node.js native modules and delving into the intricacies of typed modules

Store user input in a paragraph

choose exclusively the text within the elementor navigation menu

The standard jQuery Mobile CSS styling does not seem to be working across various browsers, extensive testing has been conducted

Position a div in the center and add color to one side of the space

How to Retrieve ViewChild Element from within Input Component in Angular 2

What is the best way to iterate through the result of an HTTP request in Angular 11?

Discover the utility of the useHistory() hook in TypeScript for Class Components

Modify text by adjusting text color based on the contrast with the background color using knockout databinding

What is the reason for the disappearance of unordered list bullets when using padding: 0?

Template containing an observable collection of observables

Transforming the appearance of the menu element in Vue using transitions

I am looking to switch the content between two divs. Specifically, I want to take the content from div 1 and move it to div 2, while moving the

The alignment of navbar elements appears to be off in Jquery mobile