htmlangulartypescriptng-classangular-ssr

ngClass has the wrong value while hydrating

The below [ngClass] expression doesn't insert the class name into DOM when Angular starts hydrating (only after it's finished).

<div class="document-pane" [ngClass]="{'single-view-left': true}">

I confirmed this when I set a breakpoint in one of the child component's constructor, there's no class when I hit it. After hydrating finishes, class is there (in DOM).

Solution

  • As a workaround, we can add the class as default and the ngClass expression will hide/keep it post evaluating the expression during change detection/hydration.

    <div class="document-pane single-view-left" [ngClass]="{'single-view-left': true}">