Angular 2.x bind class on body tag

Question

Since Angular 2.x is bootstrapped inside a body how do I add [class.fixed]="isFixed" on body tag (outside my-app)?

<html>
<head>
</head>
<body [class.fixed]="isFixed">
  <my-app>Loading...</my-app>
</body>
</html>

My app component looks like

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';
import {RouteConfig, ROUTER_DIRECTIVES, Router, Location} from 'angular2/router';
import {About} from './components/about/about';
import {Test} from './components/test/test';

@Component({
    selector: 'my-app',
    providers: [],
    templateUrl: '/views/my-app.html',
    directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES],
    pipes: []
})

@RouteConfig([
    {path: '/about', name: 'About', component: About, useAsDefault: true},
    {path: '/test', name: 'Test', component: Test}
])

export class MyApp {
    router: Router;
    location: Location;

    constructor(router: Router, location: Location) {
        this.router = router;
        this.location = location;
    }
}

Have you tried just using "body" as selector of your application component? — Günter Zöchbauer
Thank you, just tried but without success. App still works but I think it only bootstraps inside body without body itself. If I change selector to html - it replaces my head and body with template of component.. — Arūnas Smaliukas

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2015-12-23T07:49:10

Using <body> as app component works fine but you can't use binding on the <body> tag because it attempts to bind `"isFixed" to the parent and there is no parent.

Use @HostBinding instead

@Component(
  selector: 'body',
  templateUrl: 'app_element.html'
)
class AppElement {
  @HostBinding('class.fixed') 
  bool isFixed = true;
}

This is Dart code but it shouldn't be hard to translate it to TS.

See also @HostBinding and @HostListener: what do they do and what are they for?

You can always use plain JS to update the DOM if you don't depend on server side rendering or web workers.

Alternatively you can just use

document.body.classList.add('foo');

Angular 2.x bind class on body tag

1 Answers