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:

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

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


in the main.css file or something similar.

How can I achieve the desired result?


There are two way.

You can use

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

in the root component if it has

selector: 'body'



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.

Answered By – Günter Zöchbauer

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *