Angular View variable not being updated when using ViewChildren

Question

I am trying to implement some commenting functionality, and I have ran into a problem where the view value is not getting updated when values changes are being made to component.

Let me explain in detail.

I need to know if the comment I am dealing with is long or short. If it is long, I then want to show the 'SHOW MORE' or 'SHOW LESS' div. The html looks like this:

<div class="comment-container" *ngFor="let comment of displayComments">
    <div #commentTextElement>{{comment.text}}</div>
    <div class="show-more" *ngIf="comment.isLong" (click)="showMore(comment)">
        <span *ngIf="comment.showMore === true">SHOW MORE</span>
        <span *ngIf="comment.showMore === false">SHOW LESS</span>
    </div>
</div

To do this, I need to get a handle on the length of the div after the view has been checked, by declaring the handle to the text element like this:

@ViewChildren('commentTextElement') commentTextElements: QueryList<any>;

and then calling a simple function to set up the div like this:

ngAfterViewChecked() {
    this.configureCommentsText();
}

The configure comments function looks like this:

configureCommentsText(): void {

    this.commentTextElements.forEach((item, index) => {
        if(item.nativeElement.offsetHeight > 80) {
            this.displayComments[index]['isLong'] = true;
            this.displayComments[index]['showMore'] = true;
        } else {
            this.displayComments[index]['isLong'] = false;
            this.displayComments[index]['showMore'] = false;
        }
    });
    this.cdRef.detectChanges();
}

I call the detectChanges() to make sure the changes that have been made to the array of displayComments are updated. This all works well, and it displays everything correctly.

However, if the user clicks on the show-more the showMore() function is called which should change the showMore variable to true/false depending on it's current value, like so:

showMore(comment): void {
    comment.showMore = !comment.showMore; 
    //this.cdRef.detectChanges();
}

However this comment.showMore value is changed in the function, but the value in the view is not being changed. This I've proven by using a few well placed console.logs. I've even tried the detectChanges() trick but that doesn't seem to be having any effect.

I'm sure there is something obviously wrong here, but I'm new to this angular stuff. Can anybody point me in the right direction?

EDIT 1: If I remove the viewChildren stuff the showMore() function works as expected. So what is it about the viewChildren that is buggering it up?

It should work (see [this stackblitz](https://stackblitz.com/edit/template-driven-form-2-dufpgh)) unless there are errors during the execution. Check the console for that. — ConnorsFan, Apr 26 '18 at 13:09
@ConnorsFan but your version doesn't include any of the viewchildren stuff which is causing the problem — Tom O'Brien, Apr 26 '18 at 13:37

score 1 · Accepted Answer · answered Apr 26 '18 at 15:14

1

This seemed to have been caused by using the

ngAfterViewChecked()

function instead of

ngAfterViewInit()

to configure the comments. When I changed this, the behaviour worked as expected

answered Apr 26 '18 at 15:14

Tom O'Brien

1,741
9
45
73

Angular View variable not being updated when using ViewChildren

1 Answers1