Angular @ViewChild() error: Expected 2 arguments, but got 1
Angular 8
In Angular 8, ViewChild has another param
@ViewChild('nameInput', {static: false}) component : Component
You can read more about it here and here
Angular 9 & Angular 10
In Angular 9
default value is static: false
, so doesn't need to provide param unless you want to use {static: true}
In Angular 8 , ViewChild
takes 2 parameters:
Try like this:
@ViewChild('nameInput', { static: false }) nameInputRef: ElementRef;
Explanation:
{ static: false }
If you set static false, the child component ALWAYS gets initialized after the view initialization in time for the ngAfterViewInit/ngAfterContentInit
callback functions.
{ static: true}
If you set static true, the child component initialization will take place at the view initialization at ngOnInit
By default you can use { static: false }
. If you are creating a dynamic view and want to use the template reference variable, then you should use { static: true}
For more info, you can read this article
Working Demo
In the demo, we will scroll to a div using template reference variable.
@ViewChild("scrollDiv", { static: true }) scrollTo: ElementRef;
With { static: true }
, we can use this.scrollTo.nativeElement
in ngOnInit
, but with { static: false }
, this.scrollTo
will be undefined
in ngOnInit
, so we can access in only in ngAfterViewInit
In Angular 8 , ViewChild takes 2 parameters
@ViewChild(ChildDirective, {static: false}) Component