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

Question

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?

score 4 · Accepted Answer · answered Mar 28 '17 at 16:08

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.

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

1 Answers1