Error con @viewChild con renderer2

Question

En el archivo index.html tengo lo siguiente

 <body #body>
  <app-root></app-root>
</body>

y en otro componente quiero tomar el body y asignarle una clase al body

 @ViewChild("body") body: ElementRef
constructor(private render: Renderer2  ) {}

  ngOnInit(): void {
    this.render.addClass(this.body.nativeElement,"login-body")
  }

pero tengo el siguiente error core.js:4196 ERROR TypeError: Cannot read property ‘nativeElement’ of undefined

angular typescript viewchild

RRGT19 · Answer

Una solución sería utilizar document.body directamente para asignar la clase, es decir: index.html Componente export class MyAwesomeComponent implements OnInit, OnDestroy { constructor( private renderer: Renderer2 ) { } ngOnInit() { this.renderer.addClass(document.body, 'awesome-class'); } ngOnDestroy() { this.renderer.removeClass(document.body, 'awesome-class'); } } En este caso, hacerlo dentro de ngOnInit es válido ya que el body está renderizado.

Samir Llorente · Answer

En si, tienes dos errores, el viewchild buscara los elementos hijo del componente, obviamente el body es muy superior, te recomiendo usar algo mas nativo de javascript, lo otro es que deberias implementar esto en el AfterViewInit que es cuando un elemento esta renderizado
class MyComponent implements AfterViewInit {
  ngAfterViewInit() {
    // ...
  }
}

Error con @viewChild con renderer2

2 Answers

Add your own answers!

Ask a Question