Defer directive throws ExpressionChangedAfterItHasBeenCheckedError if visible from the beginning

[sbs101]

I'm submitting a ... (check one with "x")

[X ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/primeng-defer-demo-s6pozm

Current behavior
When applying the pDefer directive to a component which is already visible in the viewport without scrolling at the time of page loading in Angular a ExpressionChangedAfterItHasBeenCheckedError is thrown (as usualfor this kind of error only in development mode).

Expected behavior
No ExpressionChangedAfterItHasBeenCheckedError should be thrown.

Minimal reproduction of the problem with instructions
Start the Plunkr Case (based on the example code but without the need to scroll down to the the table) and look at the browser console output. You will see the ExpressionChangedAfterItHasBeenCheckedError message.

What is the motivation / use case for changing the behavior?
Angular stops behaving correctly after these kind of errors, so it has to be fixed.

Please tell us about your environment:
Windows 10, Firefox 86

• Angular version: 11.0 (Plunkr), 11.2.1

• PrimeNG version: 11.3, 11.2.3

• 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 ]
  Firefox 86, Chrome 88

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

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