Angular button keeps re-rendering repeatedly

Question

My Angular button keeps re-rendering repeatedly, I think its linked to the way I handle the application of my [ngClass], as per the comment in Multiple conditions in ngClass - Angular 4.

HTML

<button
  [ngClass]="getCourseContentButtonClass(button.uid, button.title)"
></button>

Component

  isCourseContentButtonPrimary(title: string) {
    return CourseContentService.IsCourseContentButtonPrimary(title);
  }

  isCourseContentElementSelected(uid: string) {
    return this.selectedCourseElementUid === uid;
  }

  getCourseContentButtonClass(uid: string, title: string) {
    let courseContentButton;
    if (CourseContentService.IsCourseContentButtonPrimary(title)) {
      courseContentButton = 'btn btn-sm btn-primary mr-3 course-content-button ';
    } else {
      courseContentButton = 'btn btn-sm btn-primary-soft mr-3 course-content-button ';
    }
    if (this.isCourseContentElementSelected(uid)) {
      courseContentButton += ' course-content-button-active';
    }
    return courseContentButton;
  }

As in there is a slight animation flicker when it transitions between state. — methuselah, Jan 09 '21 at 04:02
re-rendering suggest change detection is firing. have you confirmed that it's the class. i.e. if you remove [ngClass] from the element. does it still render continuously? — Edward, Jan 09 '21 at 04:12
[This](https://stackoverflow.com/questions/57060232/angular-performance-ngstyle-recalculates-on-each-click-on-random-input) might help too. — SiddAjmera, Jan 09 '21 at 04:52

score 1 · Accepted Answer · answered Jan 09 '21 at 04:20

seems like you may have an infinite circular event loop on the button, because have a method in your binding, which maybe invoked for every change detection between a parent child relationship. From the names I am assuming Course Content is a parent of Course element, you may want to break that cycle this explains something similar

Angular button keeps re-rendering repeatedly

1 Answers1