0

My app.component.html is as below, app-login is a Component

<app-login></app-login>

and If I write below code in login.component.scss

html, body{
  height: 100% !important; 
}

I get below style

html[_ngcontent-c3], body[_ngcontent-c3] {
  height: 100% !important; 
}

How do I target HTML from component, please suggest.

AG_
  • 2,589
  • 3
  • 20
  • 32

1 Answers1

1

You can use Renderer2 to change the html and body style from component. For example: 

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

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: [ './home.component.css' ]
})
export class HomeComponent  {
  name = 'Home';

  constructor(private renderer: Renderer2) {
    this.renderer.setStyle(document.body, 'background-color', 'yellow');   
    this.renderer.setStyle(ddocument.getElementsByTagName('html')[0], 'background-color', 'blue');
  }
}

See my answer to a similar question here: https://stackoverflow.com/a/48718382/9262488

NiK648
  • 1,484
  • 1
  • 9
  • 18
  • thanks @Nik648. for those who want to explore `Renderer2`, here is a reference https://www.concretepage.com/angular-2/angular-4-renderer2-example#selectRootElement – AG_ Feb 19 '18 at 07:39