Arūnas Smaliukas Arūnas Smaliukas - 4 months ago 130
Javascript Question

Angular 2.x bind class on body tag

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;
}
}

Answer

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 https://angular.io/docs/ts/latest/api/core/index/HostBinding-var.html for an example.