Search code examples
cssangular-ng-if

*ngIf for style tag

My problem does not appear to be solvable by using traditional ways of conditional styling, like [ngStyle] or [ngClass]. I want to conditionally define a CSS-selector using :host ::ng-deep, for example:

<style *ngIf='preventXScroll'>
    :host ::ng-deep .p-datatable-wrapper {overflow-x: hidden !important;}
</style>

But doing it this way always applies the style, regardless of the actual state of preventXScroll. Any ideas?

Solution

  • Actually, the problem can be solved via [ngClass].

    Template:

    <div class='outer-wrapper' [ngClass]='{"prevent-x-scroll": preventXScroll}'>
    <p-table>
        ...
    </p-table>
</div>

    Stylesheet:

    :host ::ng-deep .prevent-x-scroll .p-datatable-wrapper {
    overflow-x: hidden !important;
}

    This way the style is only applied to p-datatable-wrapper (within p-table child component) while it is contained in prevent-x-scroll.