Resolving Angular @ViewChild() Parameter Errors: From TS2554 to Solution

Problem Background and Error Analysis

In Angular 8, many developers encounter TS2554 errors from the TypeScript compiler when upgrading their projects. The specific error message "Expected 2 arguments, but got 1" indicates that the @ViewChild decorator expects two parameters but only one was provided.

From the error code example:

@ViewChild('nameInput') nameInputRef: ElementRef;
@ViewChild('amountInput') amountInputRef: ElementRef;

This syntax was valid in Angular 7 and earlier versions, but requires adjustment in Angular 8.

@ViewChild Parameter Requirements in Angular 8

In Angular 8, the @ViewChild decorator signature changed and now requires two parameters:

@ViewChild(ChildDirective, {static: false}) Component

The second parameter is a configuration object where the most important property is static. This parameter specifies when the query should be resolved:

• When static is true, ViewChild resolves before change detection
• When static is false, ViewChild resolves after change detection

Solution and Code Refactoring

For the code in the original problem, we need to make the following modifications:

import { Component, OnInit, ElementRef, ViewChild, Output, EventEmitter } from '@angular/core';
import { Ingredient } from 'src/app/shared/ingredient.model';

@Component({
  selector: 'app-shopping-edit',
  templateUrl: './shopping-edit.component.html',
  styleUrls: ['./shopping-edit.component.css']
})
export class ShoppingEditComponent implements OnInit {

@ViewChild('nameInput', {static: false}) nameInputRef: ElementRef;
@ViewChild('amountInput', {static: false}) amountInputRef: ElementRef;
@Output() ingredientAdded = new EventEmitter<Ingredient>();

  constructor() {}

  ngOnInit() {
  }

  onAddItem() {
    const ingName = this.nameInputRef.nativeElement.value;
    const ingAmount = this.amountInputRef.nativeElement.value;
    const newIngredient = new Ingredient(ingName, ingAmount);
    this.ingredientAdded.emit(newIngredient);
  }
}

Static Parameter Selection Strategy

In practical development, the choice of static parameter depends on the specific use case:

When you need to access ViewChild in ngOnInit or constructor, you should set static: true:

@ViewChild('nameInput', {static: true}) nameInputRef: ElementRef;

For most dynamic content or cases where access is needed after change detection, use static: false.

Version Compatibility Considerations

It's worth noting that from Angular 9 onwards, the default behavior of the static parameter changed. In Angular 9+, in most cases you can omit the static parameter, and the compiler will automatically infer the appropriate value based on usage context. However, explicitly specifying the static parameter is still recommended for code clarity and backward compatibility.

Best Practice Recommendations

Based on community experience and official documentation, we recommend:

1. Always explicitly specify the static parameter in Angular 8 projects
2. Choose the appropriate static value based on actual usage scenarios
3. Carefully check all @ViewChild and @ContentChild usages when upgrading Angular versions
4. Use TypeScript's strict mode to catch similar type errors early

By following these best practices, you can avoid similar compilation errors and write more robust and maintainable Angular code.