Apply a CSS class when the tab key is pressed by the user

Question

Apply a CSS class when the tab key is pressed by the user

Currently in my Angular 14 project, I am working on a feature where I need to apply "display: block" to an element once the user reaches it using the tab key. However, I am struggling with removing the "display: block" when the user tabs out of the element.

I have successfully implemented the first part of adding "display: block" when the element is reached via the tab key. But I am unsure about how to handle removing it when the user tabs out.

@HostListener('document:keydown.tab', ['$event'])onKeydownHandler(event: KeyboardEvent) {
if (event.key === "Tab" && (event.target as Element).classList.contains('some-class')) {
  this.renderer.addClass(this.test?.nativeElement, 'd-block');
}}

I would appreciate some assistance. Is there a more effective approach to achieve this functionality without relying solely on host listeners?

javascript angular typescript

Answer 1

Answer №1

You have the option to utilize the focus event in order to switch a variable on and off, while the blur event can be used to toggle it back. You can also listen for the mouseover and mouseout events and leverage ngStyle to toggle the styles! Similarly, you can apply this technique to ngClass as well!

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [
    `
    h1,.test {
      background-color: lightblue;
    }
    .d-block {
      display: block;
    }
    `,
  ],
  template: `
  <div tabindex="1">test</div>
  <div tabindex="1">test</div>
  
  <span class="test" tabindex="1" [ngClass]="{'d-block': isFocus2}" (mouseover)="isFocus2 = true;" (focus)="isFocus2 = true;" (mouseout)="isFocus2 = false;" (blur)="isFocus2 = false;">Hello from {{ name }}!</span>
  <div tabindex="1">test</div>
  <div tabindex="1">test</div>
    <h1 tabindex="1" [ngStyle]="{'display': isFocus ? 'block' : 'inline'}" (mouseover)="isFocus = true;" (focus)="isFocus = true;" (mouseout)="isFocus = false;" (blur)="isFocus = false;">Hello from {{ name }}!</h1>
  `,
})
export class App {
  name = 'Angular';
  isFocus = false;
  isFocus2 = false;
}

bootstrapApplication(App);

Check out the example on stackblitz

Answer 2

You have the option to utilize the focus event in order to switch a variable on and off, while the blur event can be used to toggle it back. You can also listen for the mouseover and mouseout events and leverage ngStyle to toggle the styles! Similarly, you can apply this technique to ngClass as well!

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [
    `
    h1,.test {
      background-color: lightblue;
    }
    .d-block {
      display: block;
    }
    `,
  ],
  template: `
  <div tabindex="1">test</div>
  <div tabindex="1">test</div>
  
  <span class="test" tabindex="1" [ngClass]="{'d-block': isFocus2}" (mouseover)="isFocus2 = true;" (focus)="isFocus2 = true;" (mouseout)="isFocus2 = false;" (blur)="isFocus2 = false;">Hello from {{ name }}!</span>
  <div tabindex="1">test</div>
  <div tabindex="1">test</div>
    <h1 tabindex="1" [ngStyle]="{'display': isFocus ? 'block' : 'inline'}" (mouseover)="isFocus = true;" (focus)="isFocus = true;" (mouseout)="isFocus = false;" (blur)="isFocus = false;">Hello from {{ name }}!</h1>
  `,
})
export class App {
  name = 'Angular';
  isFocus = false;
  isFocus2 = false;
}

bootstrapApplication(App);

Check out the example on stackblitz

Apply a CSS class when the tab key is pressed by the user

Answer №1

Similar questions

Using Laravel to set cookies with Ajax

Add an element to an array using the `push` method in JavaScript

calling object functions using additional parentheses

JavaScript decimal validation not functioning as intended

Issue with passing parameter values in MVC Html.ActionLink

Manipulating the value of an array obtained from an API alters its data when trying to log it in the render function of a React TSX component

Issues with Imported Routes Not Functioning as Expected

React app experiencing crashes due to Material UI Select component issues

Is using async/await with setState() in React.js the best approach for handling asynchronous operations?

Issue encountered with ngFor: 'Identifier not defined __type does not have any such member'

Displaying object properties within another object obtained from an API request in a React component

Interceptor causing Angular HTTP Client to return null value

Issue with Angular 4 Routing: Links are opening in new window instead of within router-outlet

Building a custom CellRenderer in AGGrid using TypeScript within a React environment

The uncertainty surrounding the usage of checkboxes in D3.js

Exploring the possibilities of combining mixitup with Vue.js 2.0 Component

Ways to eliminate the white background gap between pages on ionic

Adjust the height, width, and color of the "kendo-switch" widget

Strategies for efficiently retrieving delayed ajax data to display in a Rails view

Exploring Nodejs and delving into fundamental queries