Keyboard Navigation of Smart HTML Elements
JavaScriptJavaScriptAngularAngularVueVueReactReact

Grid for Angular

Angular standalone version of this topic (compatible with Angular 17+). Import both the Smart UI component and module in the standalone component.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { GridComponent, GridModule } from 'smart-webcomponents-angular/grid';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, GridModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  @ViewChild('grid', { read: GridComponent, static: false }) grid!: GridComponent;
}
<!-- app.component.html -->
<smart-grid #grid></smart-grid>

Use this.grid for API methods in this topic.

To enable easier access to functionalities of Smart custom elements for all users, even those with disabilities or using assistive technology, keyboard shortcuts and navigation are enabled for the elements, where applicable.

Keyboard interaction for user interface components is encouraged by the WAI-ARIA (Accessible Rich Internet Applications) standard and the WAI-ARIA Authoring Practices 1.1 document has been used by the Smart HTML Elements development team as a basis for the implemented keyboard support.

Keyboard Navigation

To be able to use an element's keyboard shortcuts/navigation, it has to be focused (be the document's activeElement). This can be done by clicking on it, or by navigating through the document's tab indexes by pressing Tab (navigate forward) or Shift + Tab (navigate backward). Once focus is received by the element, its keyboard shortcuts can be used.

Each custom element's keyboard shortcuts are listed on its respective Overview page (e.g. https://www.htmlelements.com/docs/accordion/).

Frequently Used Keboard Shortcuts

  • Arrow up - increments value or navigates to previous item
  • Arrow down - decrements value or navigates to next item
  • Arrow left - navigates to previous item
  • Arrow right - navigates to next item
  • Enter - activates/toggles a button/pop-up or confirms edit operation
  • Space - activates/toggles a button/pop-up
  • Escape - deactivates a pop-up or cancels edit operation
  • F2 - initiates edit operation
  • Control/Shift - modifies selection behavior (in elements that support extended selection)
  • Alt + Arrow down - activates a pop-up
  • Alt + Arrow up - deactivates a pop-up
  • Tab - focuses the next element
  • Shift + Tab - focuses the previous element

Related Properties

All Smart web components implement the following Boolean properties that can be used to control their focusing behavior, which, in turn affects keyboard navigation:

  • unfocusable - if enabled, prevents the focusing of the element with the keyboard (Tab/Shift + Tab);
  • disabled - if enabled, elements are disabled and cannot be interacted with in any way;
  • readonly - if enabled, elements cannot be edited, but can be focused with Tab/Shift + Tab and can be interacted with (e.g. pop-ups can be opened).
For AI tooling

Developer Quick Reference

Topic: keyboard-navigation   Component: Grid   Framework: Angular

Main methods: (none detected)

Common config keys: (none detected)

Implementation Notes

Compatibility: Angular 17+ (standalone)   API access pattern: @ViewChild(...) + this.component.method()

Lifecycle guidance: Bind inputs declaratively and call imperative API through @ViewChild in/after ngAfterViewInit.

Common pitfalls:

  • Using @ViewChild API too early (before view init).
  • Omitting standalone imports for Smart modules in @Component.imports.
  • Type mismatches between configuration fields and template bindings.

Validation checklist:

  • Ensure module import exists in standalone component imports array.
  • Use typed @ViewChild(..., { read: ComponentType }).
  • Call imperative methods after view initialization.