Search code examples
cssdartangular2-templateangular-dartangular2-dart

Angular 2 Dart: How to add body class from inside component?

My Angular 2 Dart application has many nested components. If a certain property of one of my components is set to true, a popup is shown.

If this popup is shown I want to add a class to the document body.

Pseudo code example:

<html>
<head>
</head>
<body class="">
<app-component>
<home-component> <!-- with routers -->
<inner-component>
<popup-component>
// if I am active I want to add a body class
</popup-component>
</inner-component>
</home-component>
</app-component>
</body>
</html>

Simple reason: If the popup component is displayed I want to disable body scrolling (overflow-x:hidden;). The popup component is shown if the property bool show_popup within popup_component.dart is set to true.

Unfortunatly in CSS - as far as i know - there is no selector to check this (Is there a CSS parent selector?) - otherwise I would say something like

body:has(.my_popup)

in the main.css file or something similar.

How can I achieve the desired result?

Solution

  • There are two way.

    You can use 

    @HostBinding('class.someclass') bool isSomeClass = true;

    in the root component if it has 

    selector: 'body'

    or 

    document.querySelector('body').classes.add('someClass');

    You can use :host-context(...) to style a component depending on a selector matching a parent

    :host-context(body.someClass) {
  background-color: red;
}

    will make the background color red when the body element has class="someClass" set.