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

AngularTypescriptAngular7ViewchildAngular8

Angular Problem Overview


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?

Angular Solutions


Solution 1 - Angular

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;

Solution 2 - Angular

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAkhilesh KumarView Question on Stackoverflow
Solution 1 - AngularStefan MorcodeanuView Answer on Stackoverflow
Solution 2 - AngularMathynView Answer on Stackoverflow