Cursor at first column

I have below HTML and i want the cursor should be at first column by default.

Thanks

To set the cursor at the first column by default in Angular, you can use the ViewChild decorator along with the ElementRef class to access the input element and set the focus programmatically.

Here's an example of how you can achieve this:

Import the necessary modules in your component file:

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

Use the ViewChild decorator to get a reference to the input element:

@ViewChild('usernameInput') usernameInput: ElementRef;

In the ngAfterViewInit lifecycle hook, set the focus on the input element:

ngAfterViewInit() {
  this.usernameInput.nativeElement.focus();
}

Update your HTML template to include a template reference variable for the input element:
```
   User Name
```

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jayraj Chhaya2y ago
To set the cursor at the first column by default in Angular, you can use the ViewChild decorator along with the ElementRef class to access the input element and set the focus programmatically.

Here's an example of how you can achieve this:
1. Import the necessary modules in your component file:
2. import { Component, ElementRef, ViewChild } from '@angular/core';
3. Use the ViewChild decorator to get a reference to the input element:
4. @ViewChild('usernameInput') usernameInput: ElementRef;
5. In the ngAfterViewInit lifecycle hook, set the focus on the input element:
6. ngAfterViewInit() { this.usernameInput.nativeElement.focus(); }
7. Update your HTML template to include a template reference variable for the input element:
8. User Name
Rajendra Taradale2y ago
You can use autofocus html attribute or you create custom angular directive this.elementRef.nativeElement.focus() something like.