How to handle a auto tab in angular4

angular 6 dynamic tabs example
selectedtabchange angular material
change mat-tab on button (click)
angular auto tab to next field
mat-tab-group example
mat-tab set active tab
mat-tab click event
mat-tab disable

I need to move the next text box after typing in text from first text box. It has to auto move after typing text in first tab to next tab.

<div class="autotabbed-container">
  <div id="example1" class="autotabbed">
    <h3>Bank sort code: XX-XX-XX</h3>
    <input type="text" maxlength="2" size="2" />
    -
    <input type="text" maxlength="2" size="2" />
    -
    <input type="text" maxlength="2" size="2" />
  </div>
</div>

When I type the text in first text box the cursor need to move next text box. Please help how to achieve this in angular 4.

Same code is not working if I want apply in ngFor. In below code if I want to display text box based on ngFor loop. In first td I will display the password text boxes and next td I will display only star. In this case how we can dynamically apply #input. I need to point only first td items not next td items. So in this case how we can achieve auto focus.

<tr>
  <ng-container *ngFor="let i of dynamicArr, let x = index">
    <td *ngIf="i !== '*'">
      <input type="password" #input1 formControlName="dyna{{i}}" id="dyna{{i}}" (input) = "onInputEntry($event, input2)" required maxlength="1" />
    </td>
    <td *ngIf=" i === '*' ">
      <img class="flotado_right" id="starimage" src="starimage.jpg" class="dot-image">        
    </td>
  </ng-container>
</tr>

I am building dynamic array like below and dynamic text is have values like 2 5 and 7. Inthis case dynamicArr[2] = 1, dynamicArr[5] = 2 ,dynamicArr[7] = 3 so other values of values of dynamicArr is *

for (let i = 0; i < 10; i++) {
  if (((i + 1) === this.dynamictext[0])) {
    this.dynamicArr[i] = '1';
  } else if (((i + 1) === this.dynamictext[1])) {
    this.dynamicArr[i] = '2';
  } else if (((i + 1) === this.dynamictext[2])) {
    this.dynamicArr[i] = '3';
  } else {
    this.dynamicArr[i] = '*';
  }
}

this can be done like this HTML

<tr>
 <ng-container *ngFor="let i of dynamicArr, let x = index">
   <td *ngIf="i !== '*'">
     <input #tab type="password" id="tab{{i}}" required maxlength="1" class="tab" (input)="onInputEntry($event,'tab',(i))" />
   </td>
   <td *ngIf=" i === '*' " class="image">&</td>
 </ng-container>
</tr>

component

onInputEntry(event, id, nextInputIndex) {
  let input = event.target;
  let nexInput = +nextInputIndex + 1;
  let newID = id + nexInput;
  document.getElementById(newID).focus();
}

angular - How to handle a auto tab in angular4, It has to auto move after typing text in first tab to next tab. <div class="autotabbed-​container"> <div id="example1" class="autotabbed"> <h3>Bank sort code:  One of the very cool new features that came out in Angular 4.3 was the HttpInterceptor. Of course this isn’t new to Angular 1 developers who had it all along but now 4.3+ developers have it so that we can add header info, handle responses, catch errors, etc. to all new HttpClient (new in 4.3 also) calls.

You could use the (input) event and template reference variables (#var) to determine if another element should be selected.

<input #input1 type="text" maxlength="2" size="2" (input)="onInputEntry($event, input2)" />
-
<input #input2 type="text" maxlength="2" size="2" />

---

// component 
onInputEntry(event, nextInput) {
  let input = event.target;
  let length = input.value.length;
  let maxLength = input.attributes.maxlength.value;

  if (length >= maxLength) {
    nextInput.focus();
  }
}

Tab group with dynamically changing tabs, Toggle light/dark theme. Toggle Zen Mode. Project. Download Project. Info. Tab group with dynamically changing tabs. 0. 0. Files. app. New File. New Folder. There's an easier way: bind to Angular's keyup.enter pseudo-event. Then Angular calls the event handler only when the user presses Enter.

Get the element through Renderer2 via ViewChild and focus, like so:

HTML:

<input #input1 type="text" maxlength="2" size="2" (keydown.enter)="focusInput2()"/>
<input #input2 type="text" maxlength="2" size="2" />

TypeScript:

export class MyComponent implements OnInit {

  constructor(private _renderer2: Renderer2)

  @ViewChild('input2') private input2: ElementRef;

  focusInput2(){
      this._renderer2.selectRootElement(this.input2["nativeElement"]).focus();
  }
}

Don't forget to import:

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

When you press enter on the first input, it will focus second input. This of course is down to the discrepancy of when you want the focus to happen.

Create a dynamic tab component with Angular, Learning Angular: Creating a tabs component. A follow up Moreover whenever the save button is clicked, the tab also closes automatically. You could also do this via the template, but it's great to be able to leverage Typescript auto-completion to fill in the needed navigation parameters. In these more advanced navigation scenarios auto-completion really helps as it acts like a form of documentation that is always up-to-date.

If you want re-usable code try with a custom directive.

Directive:

import {Directive, HostListener, Input} from '@angular/core'

@Directive({
  selector: '[appAutoTab]'
})
export class AutoTabDirective {
  @Input('appAutoTab') appAutoTab

  @HostListener('input', ['$event.target']) onInput(input) {
    const length = input.value.length
    const maxLength = input.attributes.maxlength.value
    if (length >= maxLength) {
      this.appAutoTab.focus()
    }
  }
}

(remember to import the directive in the app.module)

@NgModule({
  declarations: [
   AutoTabDirective
  ]})

HTML

<input #input1 type="text" maxlength="2" [appAutoTab]="input2"/>
<input #input2 type="text" maxlength="2"/>

Angular 2: my solution for dynamic tabs, I needed tabs that would not be destroyed by Angular. As powerful Automatically switch to another tab if this one was the current. * @param  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

An easy way to create tabs using NgSwitch in Angular 2+ , This is a tutorial which create an easy tab system using ngSwitch and the line-​height: 1.66667; } .container { width: 75%; margin: 3rem auto; }  This tutorial help to create simple angular 4 application with localstorage.This application will use webstorage service plugin to store variable data into the browser, that can use HTML 5 local storage, Session storage or In-memory mechanism to store data.

Dynamic tabs with Angular 6+ and ng-bootstrap, One of our Angular applications required the use of dynamic tabs. Download bootstrap and ng-bootstrap into your Angular project by entering the Automatic error handling in AngularJS Oracle JavaScript Extension Toolkit  What is Routing in AngularJS? If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module. The ngRoute module routes your application to different pages without reloading the entire application.

How to programmatically manage focus in an Angular 2 app , Is there a framework-wide system for obtaining tabindex values and customizing tab order? Post by: Anton S Moiseev , Author. Feb 08, 2017 03:  Angular 7, the latest version of Angular has been recently released with new features particularly in CLI tooling and performance, such as: CLI Prompts: A common command like ng add and ng new can now prompt the user to choose the functionalities to add into a project like routing and stylesheets format, etc.

Comments
  • I am new to angular so i don't know how to write a code to acheive this scenario.
  • how your identifying that the user has completed typing?
  • by using required maxlength="2" i am make sure that he will enter only two characters to the text box
  • Is this in an already existing angular application, or are you starting fresh and only needing to do this one this? if so, angular is way overkill for this.
  • This is fresh application with angular 4. It's company decision so i can't control the requirement. So Please help on this.
  • Thanks Alot Sooraj.
  • This shouldn't be the accepted answer, as this answer interacts directly with the DOM element and is not standard Angular 4/5 practice.
  • @blueprintChris If Possible could you please give solution for dynamic input auto focus so that it will useful for others.
  • Sure, please see my answer.
  • Jens, Could you please help on me know how to handle in case of *ngFor. I have tried with edited code in above..
  • If you’re using an ngFor and the content is not static, I don’t believe you can dynamically create template reference variables. You will probably need to inject the ElementRef service in the component, dynamically create IDs for the inputs, then target them that way. This seems like not a good idea though for an input form as I’d think the form inputs would be fairly static.
  • I am not aware how to bind this dynamic templates. Could you please create plunker example or solution for this special scenario. That will helps me alot.
  • What I’m saying is you can’t creat dynamic template reference variables. You’ll need another approach. You’re better off not using ngFor an making the form elements static. If you’re set on using ngFor, feel free to set up a base plunkr and I can guide you from there.
  • i have added basic plunkar. Please help on this issue. plnkr.co/edit/jPbgOabiydHX0M9AOrCt?p=preview