error TS2554: Expected 2 arguments, but got 1 with @ViewChild

Question

I was using ViewChild as follows:

@ViewChild("InternalMedia") localStream;
@ViewChild("emoji") mEmoji;

Which was working fine till angular-7.x

as soon as I upgraded it to angular-8.x it started giving following error

.../call_emoji/component.ts(41,4): error TS2554: Expected 2 arguments, but got 1.

I checked https://angular.io/api/core/ViewChild and when I change it to

@ViewChild("InternalMedia",{static:false}) remoteStream;

It works. I'm not getting what static does and what should be it's value to work as previous?

Answer 1

According to the Angular documentation static checks

whether or not to resolve query results before change detection runs (i.e. return static results only). If this option is not provided, the compiler will fall back to its default behavior, which is to use query results to determine the timing of query resolution. If any query results are inside a nested view (e.g. *ngIf), the query will be resolved after change detection runs. Otherwise, it will be resolved before change detection runs.

Effectively this determines when the query is run to retrieve the element. If set to false the query will be run after any change detections. If set to true it will be run immediately.

For more information and why this option is included please see this Github issue.

The behavior you are probably looking for is to set static to false. This will result in the old behavior. However if your component's view is not dynamic (for example you do not use *ngIf) you should be able to set it to true safely.

Answer 2

After migration to Angular 8 you should declare manually if it's static or not

@ViewChild(QuilldEditorComponent, {static: true}) quillEditorComponentInstance;

If you have further questions ask them or for more details please read this issue https://github.com/angular/angular-cli/issues/14553 or take a look at offical documentation https://angular.io/guide/static-query-migration

// query results available in ngOnInit
@ViewChild('foo', {static: true}) foo: ElementRef; 

OR

// query results available in ngAfterViewInit
@ViewChild('foo', {static: false}) foo: ElementRef;