Datatable column misalignment issue on page change

[amitgaikwad02bright]

Current behavior

Issue is with Datatable with scrollable true & scroll height specified & paging enabled.
When page is changed header columns are getting misaligned.

Expected behavior

columns should not get misaligned

Minimal reproduction of the problem with instructions

link to plnk http://plnkr.co/edit/1FIX0hM0oEkMNJIpm27u?p=preview

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

tested on windows

• Angular version: 2.0.X

angular 4.2.0

• PrimeNG version: 2.0.X

primeng 4.1.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome,IE

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[amitgaikwad02bright]

ScrollableView components alignScrollBar method which set marginRight on scrollableHeader is getting called before grid rendering properly with paging change.
I put debug point in alignScrollBar method, found that, after page index changes, datatable has new page records as well old page records, at that moment hasVerticalOverflow returns true & marginRight get set.

[cagataycivici]

This is actually a bug of Angular 4.x, it was working with a previous version, at after view checked old dom elements also exist as you said so all calculations are messed up. Only known solution is a small timeout. We'll create an issue to Angular team about this.