I want to apply different full page background-color to my login page with "login" as URL. I use `ngAfterViewInit()` and Renderer2 in my login component. When I visit this page and go back to other pages, all the backgrounds of my pages change like my login page, but I want just my login page background-color change.

**My Login component using Renderer2**

```
import {AfterViewInit, Component, ElementRef, OnInit, Renderer2} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, AfterViewInit {

  constructor(private elementRef: ElementRef, private router: Router, private renderer: Renderer2) {
    this.renderer.setStyle(document.body, 'background-color', 'yellow');
  }

  ngOnInit() {
  }
}

```

**My Login component using AfterViewInit**

import {AfterViewInit, Component, ElementRef, OnInit, Renderer2} from '@angular/core';
 import {Router} from '@angular/router';

```
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, AfterViewInit {

  constructor(private elementRef: ElementRef, private router: Router) {
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = '#E7fff4';
    }
}

```