How to use new static option in ViewChild Angular 9 ?

This tutorial guides you on how to use new static option in ViewChild Angular 9. In Angular 8+ static option in ViewChild is used to resolve query results before or after change detection.

Static option in ViewChild Angular 9

In our previous tutorial you have learnt how to fetch template reference variables through ViewChild.

ViewChild is an angular property that configures a view query. The change detector detects the view DOM changes and when a new child matches the template reference variable, the property will be updated. The change detector looks for the template reference variable matching the selector in the view DOM.

View queries will be set before the ngAfterViewInit callback is called.

The static option in ViewChild is used to resolve query results before change detection runs and also after change detection runs. To resolve query results before the change detection runs, you need to set static option value as true.

Similarly, to resolve query results after the change detection runs, you need to set static option value as false. The default value of static option is false.

Syntax

@ViewChild('<local-reference-selector>', {static: true}) <viewchild-property-name>: ElementRef;

Example

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

Note, if you are using Angular 9, you only need to add {static: true} if required. And no need to add {static: false} .

Therefore, the static option need to be used as second argument and the first argument is selector. And this static option can be applied to all usages of @ViewChild() and also @ContentChild(), if you wanted to access to the template’s selected element and DOM with @ViewChild().

Static option usage with ViewChild – Angular 9 Example

The following example code shows how you need to use new static option in ViewChild Angular 9.

Note, in the first case (#itemNameInput) we are passing local references through methods. And in the second case (#itemDescInput) we are passing local references through ViewChild.

create-item.component.html

<div class="row">
    <div class="col-xs-12">
      <p>Create Items and Specifications!</p>
      <label>Item Name</label>     
      <input 
          type="text" 
          class="form-control" 
          #itemNameInput>
      <label>Item Description</label>     
      <input 
          type="text" 
          class="form-control" 
          #itemDescInput>
      <br>
      <button
        class="btn btn-primary"
        (click)="onAddItem(itemNameInput)">Add Item</button>
      <button
        class="btn btn-primary"
        (click)="onAddItemSpec(itemNameInput)">Add Item Specifications</button>
    </div>
  </div>

Then, check how we are trying to fetch the local reference “#itemDescInput” through ViewChild Angular property in our component class.

create-item.component.ts

import { Component, OnInit, EventEmitter, Output, ViewChild, ElementRef } from '@angular/core';

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

  @Output() itemAdded = new EventEmitter<{itemTitle: string, itemDesc: string}>();
  @Output() itemSpecAdded = new EventEmitter<{itemTitle: string, itemSpec: string}>();

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

  newItemSpec = '';

  constructor() { }

  ngOnInit(): void {
  }

  onAddItem(itemNameInput : HTMLInputElement) {        
    this.itemAdded.emit({      
        itemTitle: itemNameInput.value,        
        itemDesc: this.itemDescInput.nativeElement.value
    });
  }

  onAddItemSpec(itemNameInput : HTMLInputElement) {
    this.itemSpecAdded.emit({      
      itemTitle: itemNameInput.value, 
      itemSpec: this.newItemSpec
    });
  }

}

Also See:

Static option in ViewChild Angular 9

Static option usage with ViewChild – Angular 9 Example

References: