Split View is not working as expected, styles are not getting applied

Question

I'm using SplitView Component inside another component, but styles - --cx-active-view:2; --cx-view-position:0; are not getting applied on cx-split-view and cx-view. Below are the code snippets for the same -

<cx-view class="card">
  <div class="header">
    <div class="title-bar>
    </div>
  </div>
</cx-view>
<router-outlet></router-outlet>

<cx-split-view [hideMode]="false">
    <cx-view>
       <cx-table></cx-table> // using TableComponent inside split view.
    </cx-view>
 <router-outlet></router-outlet>
</cx-split-view>

As a result, it doesn't show another component inside the browser. If manually add styles in cx-split-view and cx-view(Dev tools -> elements), then it starts showing the second component.

**Already imported SplitViewModule in both the components.

Answer 1

Fixed this by adding below key in tsconfig.json file -

"angularCompilerOptions": {
  "enableIvy": true
}

required for style attributing - https://angular.io/guide/ivy