Estate atento ya que en esta reseña vas a hallar el arreglo que buscas.
Solución:
Usar static: true cuando quieras acceder a la ViewChild en ngOnInit.
Usar static: false será accesible sólo en ngAfterViewInit. Esto es también lo que quiere hacer cuando tiene una directiva estructural (*ngIf etc.) en su plantilla.
En la mayoría de los casos static: false trabajará.
import Component, OnInit, AfterViewInit, ViewChild, ElementRef from '@angular/core';
@Component(
selector: 'example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss']
)
export class ExampleComponent implements OnInit, AfterViewInit
@ViewChild('elementA', static: true ) elementStatic: ElementRef;
@ViewChild('elementB', static: false ) elementDynamic: ElementRef;
public ngOnInit(): void
this.elementStatic.nativeElement; // Ok
this.elementDynamic.nativeElement; // ERROR TypeError: Cannot read property 'nativeElement' of undefined
public ngAfterViewInit(): void
this.elementStatic.nativeElement; // Ok
this.elementDynamic.nativeElement; // Ok
A
BActualizar: A partir de Angular v9.x static tiene un valor predeterminado de false.
Lea más en: https://angular.io/api/core/ViewChild#viewchild
De la documentación:
como elijo cual static valor de la bandera a usar: true o false?
En los documentos oficiales de la API, siempre recomendamos recuperar los resultados de las consultas en ngAfterViewInit para ver consultas y ngAfterContentInit para consultas de contenido. Esto se debe a que en el momento en que se ejecutan esos enlaces de ciclo de vida, la detección de cambios se ha completado para los nodos relevantes y podemos garantizar que hemos recopilado todos los resultados de consulta posibles.
La mayoría de las aplicaciones querrán usar static: false por la misma razón. Esta configuración garantizará que la consulta encuentre coincidencias de consulta que dependen de la resolución de enlace (p. ej., resultados dentro de *ngIfs o *ngFors).
Hay casos más raros en los que static: true podría ser necesario (ver respuesta aquí).
https://angular.io/guide/static-consulta-migración
Tienes la opción de añadir valor a nuestro contenido informacional contribuyendo tu experiencia en las notas.