Guide on setting the focus of an input in a form field using ngIf

I am currently facing an issue where I need to focus on a specific input in my code based on certain conditions derived from an observable. In this scenario, I have initialized a boolean to true inside the ngOnInit() method.

export class InputOverviewExample implements OnInit {
  bool: boolean;

  @ViewChild("input1", { static: true }) input1: MatInput;
  @ViewChild("input2", { static: true }) input2: MatInput;

  ngOnInit() {
    this.bool = true;
    this.input1.nativeElement.focus();
    this.input2.nativeElement.focus();
  }
}

However, I have observed that the focus functionality does not work as expected when using a mat-form-field that is conditionally displayed.

<form class="example-form">
  <h3>Without *ngIf :</h3>
  <mat-form-field appearance="outline" class="example-full-width">
    <input matInput #input1 placeholder="Auto focus" value="Test_input1" />
  </mat-form-field>

  <h3>With *ngIf :</h3>
  <mat-form-field appearance="outline" class="example-full-width" *ngIf="bool">
    <input matInput #input2 placeholder="Auto focus" value="Test_input2" />
  </mat-form-field>
</form>

Link to interactive code example on StackBlitz

If anyone has a solution to this issue, I would greatly appreciate it.

Thank you.

javascriptangulartypescriptangular-materialfocus

Answer №1

To fully grasp ViewChild {static:true} and {static:false} along with {read}, it is essential to understand their functionality.

To begin with, you must define your ViewChildren as:

@ViewChild("input1", { static: false, read:ElementRef }) input1: ElementRef;
@ViewChild("input2", { static: false, read:ElementRef }) input2: ElementRef;

The usage of static: false ensures that Angular verifies if it is within a *ngIf statement.

With read:ElementRef, your "input1" and "input2" are recognized as ElementRef, rather than MatInput.

Another crucial aspect is how Angular functions. Angular performs all actions and updates the application, so in cases like:

this.bool = true;
this.input2.nativeElement.focus(); //<--this.input2 is undefined

Where this.input2 is undefined because Angular has not yet refreshed the application, you should enclose it within a setTimeout - this informs Angular to execute additional instructions after refreshing the application - or utilize ChangeDetectorRef.

Therefore, the solution would be:

  ngOnInit() {
    this.bool = true;
    setTimeout(()=>{
      this.input1.nativeElement.focus();
      this.input2.nativeElement.focus();
    })
  }

Answer №2

initialize() {
    this.flag = true;
    if(...){
        this.firstInputElem.nativeElement.focus();
    }
    else{
        this.secondInputElem.nativeElement.focus();
    }
    
}

Answer №3

Utilize QueryList for element querying

import { Component, OnInit, ViewChild,   
QueryList,
  ViewChildren, ElementRef, AfterViewInit, ChangeDetectorRef } from "@angular/core";
import { MatInput } from "@angular/material";
import {startWith} from 'rxjs/operators';

/**
 * @title Basic Inputs
 */
@Component({
  selector: "input-overview-example",
  styleUrls: ["input-overview-example.css"],
  templateUrl: "input-overview-example.html"
})
export class InputOverviewExample implements OnInit, AfterViewInit {
  bool: boolean;
  @ViewChild("input1", { static: true }) input1: MatInput;
  // @ViewChild("input2", { static: true }) input2: MatInput;
  @ViewChildren('input2') input2: QueryList<ElementRef>;

constructor(private cd: ChangeDetectorRef) {

}
  ngOnInit() {
    this.bool = true;
    this.input1.nativeElement.focus();
  }

  ngAfterViewInit(): void {
     this.input2.changes
     .pipe(
        startWith(true),
      )
      .subscribe(() => {
        this.input2.forEach((elementRef: ElementRef) => {
          if(elementRef) {
             elementRef.nativeElement.focus();
             this.cd.detectChanges();
          }
        });
      });
  }
}

DEMO

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Utilizing Vue.js to dynamically fill input fields based on the selection of an element

As I am still new to learning Vue.js, I may not be using the correct terminology here. My current project involves a basic Vue application where I have implemented a simple search box functionality. The search box triggers an event (v-on:blur) when text i ...

javascriptvue.js

An undefined value error occurred while attempting to save data to a MongoDB collection through a node/express server

Anticipated Outcome I am looking to successfully save a new page to mongo db after server validation of input, without encountering any errors in the console. The issue seems to be originating from the post method in the routes in admin_pages.js and I&apos ...

javascriptarraysnode.jsmongodbexpress

Tips for showcasing JSON data within an array of objects

I'm trying to work with a JSON file that has the following data: {"name": "Mohamed"} In my JavaScript file, I want to read the value from an array structured like this: [{value: "name"}] Any suggestions on how I can acc ...

javascriptjsonreactjs

A guide to sorting an object with integer keys by its values using JavaScript

I am facing an issue with sorting a map by values instead of keys. No matter what I do, it always ends up getting sorted by the keys. On the server side, I have a map that is already sorted. When I send this map to JavaScript using JSON, it gets re-ordere ...

javascript

Perform a series of observables from a dynamically generated array

Currently, I am in the midst of a project (Angular2) where I am dynamically creating Observables and storing them in an array. var ObservableArray : Observable<any>[] = []; //populating the Observable array dynamically for (var i = 0; i < this.ma ...

javascriptangularrxjsrxjs5

Retrieve the key{index} property from the .map method in React for the element that was just clicked

I am facing an issue with my code const Component = () => { const [Clicked, setClicked] = useState(false); const handleClick = (prop, e) => { console.log(prop); } return ( <div> {arrayCard.map((item, i) => { ...

javascriptreactjsnext.js

What is the best way to create and manage multiple collapsible Material-UI nested lists populated from an array with individual state in React

In my SideMenu, I want each list item to be able to expand and collapse independently to show nested items. However, I am facing the issue of all list items expanding and collapsing at the same time. Here is what I've attempted: const authNavigation ...

reactjstypescriptmaterial-uinested-listsreact-state-management

Angular and Visual Studio require the use of "ng" and "npm" commands

Currently using: Windows 10, Visual Studio 2022 17.1.0 (scheduled for an update). In the past, I would simply copy JavaScript library files into a subfolder of my website or application, add some <script...> tags to the appropriate pages, and consid ...

node.jsangularnpmwindows-10

Altering the hue of a picture

Looking to alter the color of an image on a webpage, specifically a carport. It's crucial that the texture and shadows remain consistent. Swapping out images with different colors would require an excessive amount of images, so I'm seeking advice ...

javascriptjquerycssflashcolors

Exploring the process of writing JSON in Angular to retrieve diverse data points

I have successfully printed the following JSON data in Angular from a local file: [{ "Firstname": "Steve", "Lastname": "Jansson" }, { "Firstname": " ...

arraysjsonangular

The functionality of the System JS map is not functioning properly

Despite the challenges I face with System.js, I find it to be a valuable tool that I prefer over alternatives. This is my current System.js configuration: System.config({ packages: { app: { format: 'register' ...

typescriptangularsystemjsprimeng

Extract and loop through JSON data containing various headers

Having no issues iterating through a simple JSON loop, however, the API I am currently utilizing returns a response with multiple headers. Despite my efforts in various methods to access the results objects, I still face some challenges. The response struc ...

javascriptjqueryjson

Finding a solution to the type issue of error handling in Route Handler with NextJS

I'm working on a route handler located at app/api/transactions/route.ts. Here's a snippet of the code: import { NextRequest, NextResponse } from "next/server"; import { AxiosError } from "axios"; import axios from "../axi ...

javascriptreactjstypescriptnext.jsaxios

Implementing the Google Maps API into a React application to generate a customized route between two specified points

I'm currently developing a React application that is designed to display the distance between two points on a map. Although I successfully implemented this feature using JavaScript and HTML, I am facing challenges in converting it to React as I am re ...

javascripthtmlreactjsgoogle-maps

The module has defined the component locally, however, it has not been made available for

I have developed a collaborative module where I declared and exported the necessary component for use in other modules. import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DateslideCompone ...

angulartypescriptionic-frameworkionic4ng-modules

Generating a hierarchical structure of JSON data through iterative looping

Currently, I am in the process of creating a directive within Angular to assist with field validation. The functionality is working smoothly until it comes time to store the validation result. My objective is to store this information in an object structu ...

javascriptjsonangularjs

Is there a way to modify the button's color upon clicking in a React application?

I am a beginner in the world of React and currently exploring how to utilize the useState hook to dynamically change the color of a button upon clicking. Can someone kindly guide me through the process? Below is my current code snippet: import { Button } ...

javascriptcssreactjsreact-hooksfrontend

Exploring the Magic of Angular 5 Reactive Forms: Step-by-Step Guide to Dynamically Implement Validators and Displaying Errors upon Form Submission

My goal is to dynamically manage the required validator for form fields. It seems to be working fine when the user interacts with the field before submitting the form, as it validates onBlur and onSubmit. However, if a user submits the form without interac ...

angularangular5

I am currently developing a program that is displaying a blank page despite my efforts to write

I've been trying to write the code below but it only shows a blank page. var greeting = React.createClass({ render: function() { return ( <div> <h1>Hello</h1> </div> ...

javascriptreactjs

Which five key JavaScript concepts should I grasp in order to excel as an AngularJS developer?

Coming from a background of server-side coding, I am delving into the world of AngularJS now. This means I need to have a solid grasp of JavaScript before diving in. If I don't have enough time to master JavaScript completely at the moment, what are ...

javascriptangularjs