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!

Related Questions

Como obtener el id de un un grupo de botones con JS?

Tengo problemas con mi APK de produccion que genere con React Native

C# Ayuda, tengo un bug en un juego y no se solucionarlo Unity

Ejercicios de Arrays

DataTables 650k muy lento. Server-side funciona?

Eliminar la ultima coma de un foreach, Laravel

Verificar que un valor existen en un JSON localStorage

En Python, en el Método Index, Por qué al correrla no me da el 5 como respuesta? Se queda en blanco o sea vacío. Ver el detalle adjunto

Bottom Sheet Android [peekHeight] no funciona en Android 6

Cross validation en R

Cambiar Id de Proyecto en Android Studio

Obtener ultimo registro guardado en una tabla con relación 1 a N

Problemas entre componentes en Angular

Saber cuando el scroll llega al inicio o final del carousel con jquery

Comportamiento extraño de páginas aspx

Problema con algoritmo en Ruby

¿Cómo desloguerase de conexión ssh con paramiko?

Prestashop: problema al añadir condicionales en archivo tpl (PHP & Smarty)

¿Es necesario el uso de ‘volatile’ en estas dos variables de instancia? (Algoritmo de la Panadería)

Como guardar tarjetas de un cliente MercadoPago sdk Nodejs

Ask a Question