Class directive not applied correctly for ngFor and ChangeDetectionStrategy.OnPush

[dfmartin]

I am trying to use ChangeDetectionStrategy.OnPush along with an ngFor, but have found that the class/ngClass directive does not work when using OnPush. What I am finding is that the appropriate class is being applied to only the last item in the list.

This occurs only on the initial render. If the screen is resized to cause a change then everything works from that point forward. I have tried ChangeDetectorRef.markForCheck() and seen no change. One thing that causes some head scratching is that the class is applied to the last item so it's obvious the class directive is firing correctly somewhere.

I have put up a plunker (appropriated from a demo for side nav). If you look at the file src/app/responsive-sidenav.ts . There is a line in the meta that can be commented out to see the "correct" behavior.

http://plnkr.co/edit/zalFNqqiznHUyg33FJII?p=preview

[ThomasBurleson]

This will be fixed with PR https://github.com/angular/flex-layout/pull/223/files.

Also here is a working Plunkr version (with the latest flex-layout code).

• Note the html <div class='item' ngClass.gt-xs='item showOnGtXs'>
• Note the css

.item.showOnGtXs {
  color: #932e2e;
  background-color: #DDECFE
}

Here are some docs explaining how to add/remove/merge classes: https://github.com/angular/flex-layout/wiki/ngClass-API#responsive-features

Note: the initial page load issue is still present.

[ThomasBurleson]

Reopen since the ngFor issue is still present.

[ThomasBurleson]

@dfmartin - see working Plunkr https://plnkr.co/edit/jCICQ1GXFnzFqFTFlXwh?p=preview

Note: you do not need to use this.cdr.markForCheck(); in the $media.subscribe handler.

uses local snapshot build of the PR flex-layout.umd.js

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}