Skip to main content

Example: Set Component Tab Index

This allows you to set a specific tab index or tab index starting point for a component as an Input.

Component

@Component({
  selector: 'app-some-comp',
  templateUrl: './some-comp.component.html',
  styleUrls: ['./some-comp.component.scss']
})
export class SomeCompComponent {
  @Input() tabIndex: number;
 
  constructor() {
    // Provide a default value
    this.tabIndex = 0;
  }
}

Component HTML​

This is one way you can use the component's tabIndex value within the its template to provide tabindex values for child elements.

<input type="text" [attr.tabindex]="tabIndex">

Component Instance​

This is an example of setting the tab index for an instance of the component.

<app-some-comp [tabIndex]="5"></app-some-comp>