CODEWITHSUNDEEP
angulartypescriptangular8
tony Macias
tony Macias

Reputation: 226

how to handle view child static error in angular 8

this is my code i recently upgraded to angular 8 and this code is no longer working

@ViewChild(MatList, { read: ElementRef }) matList: ElementRef;

  // getting a reference to the items/messages within the list
  @ViewChildren(MatListItem, { read: ElementRef }) matListItems: QueryList<MatListItem>;

this is message error TS2345: Argument of type '{ read: typeof ElementRef; }' is not assignable to parameter of type '{ read?: any; static: boolean; }'. Property 'static' is missing in type '{ read: typeof ElementRef; }' but required in type '{ read?: any; static: boolean; }'.

Upvotes: 3

Views: 1223

Answers (3)

DevReboot
DevReboot

Reputation: 161

Angular 8 added a new boolean property for @ViewChild called 'static'. 'static' defines the timing of initialization. If 'static' is true, initialization will occur on view initialization (ngOnInit). If 'static' is false, initialization will occur after the view is rendered (ngAfterViewInit).

This only applies to @ViewChild, not @ViewChildren, so try this:

@ViewChild(MatList, { static: false, read: ElementRef }) matList: ElementRef;

  // getting a reference to the items/messages within the list   @ViewChildren(MatListItem, { read: ElementRef }) matListItems: QueryList<MatListItem>;

Upvotes: 1

Erfan Nazmehr
Erfan Nazmehr

Reputation: 292

you need also to add the static property, to the object.

set it to false because this is in moste cases the default.

example

@ViewChild(MatList, { read: ElementRef, static: false }) matList: ElementRef;

Upvotes: 1

Sergiu Molnar
Sergiu Molnar

Reputation: 1020

After Angular8, ViewChild static property is required. So you have to set this in your both ViewChild declarations after the ready property. So you will have

@ViewChild(MatList, {read: ElementRef, static: false}) matList: ElementRef;
@ViewChild(MatListItem, {read: ElementRef, static: false}) matListItems: QueryList<MatListItem>;

The static property can be set:

  • true to resolve query results before change detection runs
  • false to resolve after change detection

Upvotes: 4

Related Questions