0

While developing a Login module. I had a theme build in html which i needed to integrate into my login module.
Now it required the body of html to include a custom css(login.page.css).
One way is to add the custom css into the index.html body but then that css will be applied to every page i render in future where i don't even need it. So i tired with this code below...

//FileName: login.component.ts
@Component({
    selector: 'login-app' ,
    templateUrl: './login.component.html',
    styleUrls: ['./login.page.css', './login.component.css']
})

export class LoginComponent implements OnInit {

    ngOnInit(){
        let body = document.getElementsByTagName('body')[0];
        //body.classList.add("theme-default");   //add the class
        body.classList.add("page-signin");   //add the class
    }

It worked with success on adding the css to body but it failed to change the style of body.

3rdi
  • 475
  • 4
  • 12
  • Please refer to this: https://stackoverflow.com/questions/43542373/angular2-add-class-to-body-tag – Prachi May 10 '18 at 12:13
  • Miss @Prachi | Thanks :D it works too and i didn't see it! But just in my case i also required "encapsulation: ViewEncapsulation.None" so that the style gets applied globally! – 3rdi May 10 '18 at 14:09

1 Answers1

1

*Fix

Use ViewEncapsulation to achieve this... 

import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'login-app' ,
    templateUrl: './login.component.html',
    styleUrls: ['./login.page.css', './login.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class LoginComponent implements OnInit {

    ngOnInit(){
        let body = document.getElementsByTagName('body')[0];
        //body.classList.add("theme-default");   //add the class
        body.classList.add("page-signin");   //add the class
    }
}

In this code the ngOnInit function and few js code is used to push my css into the body. But that will not render login.page.css into the DOM but rather will be render in a shadow DOM so this css style will be used only for current module and not the body. For that in the @Component use the code

encapsulation: ViewEncapsulation.None

and this will allow my css to render the main dom elements too. I would appreciate any better solution for you guys but if nothing works. Give a try to this code!

3rdi
  • 475
  • 4
  • 12