question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ChangeDetectionStrategy.onPush not allowing rowClass to update

See original GitHub issue

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

In my use-case for this component, I’m using the datatable as a list, in which clicks on rows open a side-panel. Once a row is clicked, its colour changes as long as the side-panel is open. This is achieved by altering a boolean field in the object associated with the row, namely “$$activated”, and using the rowClass input to assign a CSS class to the entire row.

Moreover, while the side-panel is open, the user can change the activated row by using the arrow keys, and this will in turn change the $$activated field on the previous/next item allowing to navigate the table. Finally, once the side-panel is closed, the row will lose its activated style.

This used to work perfectly until, relatively recently, the onPush change detection strategy has been added: what happens now is that, when the panel is open and I navigate the table, the datatable component won’t realise that data has changed and therefore the glowing row won’t change. Also, once I close the side-panel, the row will remain activated up until I hover the table with my mouse, which triggers a recalculation of the row styles (including mine defined through rowClass).

Expected behavior I would expect the datatable to detect my changes. This might be achieved by making the ChangeDetectionStrategy configurable.

Please tell us about your environment: Mac OS X

  • Table version: 11.2.0
  • Angular version: 5.2.8
  • Browser: Google Chrome 65.0.3325.162

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:4
  • Comments:6

github_iconTop GitHub Comments

2reactions
evxncommented, Sep 3, 2018

Figured out the solution for #1334:

import {ColumnChangesService} from '@swimlane/ngx-datatable';

constructor(private columnChangesService: ColumnChangesService) { }

triggerColumnChangeDetection(): void {
    this.columnChangesService.onInputChange();
}
0reactions
jayaprakashinstrivecommented, Sep 18, 2019

@evxn thank you so much…it working

Read more comments on GitHub >

github_iconTop Results From Across the Web

After ChangeDetectionStrategy.OnPush enabled UI doesn't ...
With OnPush strategy, you need to tell your component to update outside event / @Input(), such as observable subscription:
Read more >
Angular OnPush Change Detection - Avoid Common Pitfalls
In this post we are going to cover some typical pitfalls where OnPush is giving unexpected results and how to fix those situations,...
Read more >
Collections State Management Service for Angular - ITNEXT
Collection Service will help you manipulate collections: create a collection of items, and safely update one or multiple items (without ...
Read more >
angular/material2 - Gitter
Hey guys, I would love to use ChangeDetectionStrategy.OnPush ... and without default change detection that function is not "refreshing" as it returns just...
Read more >
Angular Change Detection and the OnPush Strategy - Toptal
Learn how to use the OnPush Angular change detection strategy and make the most out of immutable data structures.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found