Ngx-tab2-index NPM

Installation

npm i ngx-tab2-index

API

import { NgxTab2IndexModule } from 'ngx-tab2-index' selector: tab2

Application

Is your scrren have lots of input fields your user feel difficulty to change focus on on input to another by using mouse.,then you can use NgxTab2IndexModule for navigate inputs group by simply press keyboard arrow keys , Key board arrow ke navigation inside inputs and inputs group, Will working on all type of inpusts Currently its not set focus on select and text area but that future will add n future

Note

This Module Restrict Input type number auto counter spinner from increase or decrease on arrow key up ,arrow key down and mouse wheel event

Demo

Demo App

Usage

1) Register the NgxTab2IndexModule in your app module.

import { NgxTab2IndexModule } from 'ngx-tab2-index'

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule, MatInputModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxTab2IndexModule } from 'ngx-tab2-index';
import { AppComponent } from './app.component';

@NgModule({
 declarations: [AppComponent],
 imports: [
   BrowserModule,
   BrowserAnimationsModule,
   FormsModule,
   ReactiveFormsModule,
   MatInputModule,
   MatAutocompleteModule,
   HttpClientModule,
   NgxTab2IndexModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule {}

2) Use the directive (NgxTab2IndexModule) in your component.

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { AppService } from './app.service';
@Component({
  selector: 'app',
  template: `<h3>NgxTab2IndexModule demo app using Angular Material</h3>
<div>
  <mat-form-field>
    <input matInput  tab2
      formControlName="country" >
  </mat-form-field>
  <input tab2>
  <input type="radio" tab2>
  <input type="checkbox" tab2>
</div>
`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor() {}

  ngOnInit() {    
  }  
}