Question

84

Add class to body on Angular2

rated 0 times [ 88] [ 4] / answers: 1 / hits: 18237 / 8 Years ago, tue, october 11, 2016, 12:00:00

I have three components. These are HomeComponent, SignInComponent and AppComponent. My Home Page (HomeComponent) is showing when the application opened. I clicked the Sign In button by signin page opens.I want signin-page class to body while opening it.

How can I do it?

// AppComponent

import { Component } from '@angular/core';



@Component({

  moduleId: module.id,

  selector: 'app',

  template: '<router-outlet></router-outlet>'

})

export class AppComponent {}



// SignInComponent

import { Component } from '@angular/core';



@Component({

    moduleId: module.id,

    selector: 'signin',

    templateUrl: './signin.component.html',

    styleUrls: ['./signin.component.css']

})

export class SignInComponent {}



// HomeComponent

import { Component } from '@angular/core';



@Component({

    moduleId: module.id,

    selector: 'home',

    templateUrl: './home.component.html'

})

export class HomeComponent { }



// Part of index.html

<body>

<app>

    <div class=spinner>

        <div class=bounce1></div>

        <div class=bounce2></div>

        <div class=bounce3></div>

    </div>

</app>

</body>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josuea

Add To Favorites

Follow

Total Points: 609

Total Questions: 121

Total Answers: 104

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

josuea questions

1 POST http://localhost:3000/undefined/post 404 (Not Found)

Tue, Mar 2, 21, 00:00, 3 Years ago

1 React Warning: Each child in a list should have a unique key prop. in render() function

Mon, May 18, 20, 00:00, 4 Years ago

1 Why is asdf.replace(/.*/g, x) == xx?

Fri, Apr 17, 20, 00:00, 4 Years ago

1 how can i get value of moment format date picker in format (YYYY-MM-DD)

Tue, Dec 10, 19, 00:00, 5 Years ago

1 SyntaxError: Unexpected token in Gulpfile.js

Fri, Sep 27, 19, 00:00, 5 Years ago

View All

answered 8 Years ago kayle · Accepted Answer

You can change your root selector to body and then use HostBinding decorator

@Component({

  selector: 'body',

  template: `<child></child>`

})

export class AppComponent {

  @HostBinding('class') public cssClass = 'class1';

}



@Component({

  selector: 'child',

  template: `<button (click)=setClass()>Set class</button>`

})

export class ChildComponent {

  constructor(private rootComp: AppComponent) {  }

  setClass() {

    this.rootComp.cssClass = 'class2';

  }

}