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, Dec 23 '15 at 07:29
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, Dec 23 '15 at 07:35

score 21 · Accepted Answer · edited May 23 '17 at 12:10

21

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');

edited May 23 '17 at 12:10

Community

1
1

answered Dec 23 '15 at 07:49

Günter Zöchbauer

623,577
216
2,003
1,567

I think it could be a solution but I cannot make even simplest example working with HostBinding.. do you have a link to any example?.. Example from angular.io/docs doesn't work for me.. – Arūnas Smaliukas Dec 23 '15 at 08:19
I work only with Dart and I tried it and it worked for me. Can you create a Plunker from your example and we try to figure out why it's not working? – Günter Zöchbauer Dec 23 '15 at 08:21
I got HostBinding working but I will not use it this time. I'll just add class on body in some cases. But I can't select elements with angular 2 (or I don't know how). @Günter Zöchbauer can you look at this question http://stackoverflow.com/questions/34432980/angular-2-x-selecting-dom-element Thanks – Arūnas Smaliukas Dec 23 '15 at 10:15
Glad to hear you got it working. I think the other question is something that is quite different in Dart, therefore I can't help you there. – Günter Zöchbauer Dec 23 '15 at 10:18
the link is broken – Stepan Suvorov Sep 15 '16 at 15:29
1

@StepanSuvorov thanks for the hint. There is no example in the new docs link anymore :-/ I added a link to another answer that has more explanation instead. – Günter Zöchbauer Sep 15 '16 at 15:33
I don't know to what extend this is a good solution as it will replace the whole body and so remove all the – Sébastien Loix Dec 26 '16 at 18:37

Angular 2.x bind class on body tag

1 Answers1

Linked