Arūnas Smaliukas Arūnas Smaliukas - 1 year ago 556
Javascript Question

Angular 2.x bind class on body tag

Since Angular 2.x is bootstrapped inside a body how do I add

on body tag (outside my-app)?

<body [class.fixed]="isFixed">

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

selector: 'my-app',
providers: [],
templateUrl: '/views/my-app.html',
pipes: []

{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 Source

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

  selector: 'body',
  templateUrl: 'app_element.html'
class AppElement {
  bool isFixed = true;

This is Dart code but it shouldn't be hard to translate it to TS. See also for an example.