Tabs

Michal GrzegorczykSenior Front End Engineer, Ofair

Build a tabs component that displays one panel of content at a time depending on the active tab element. Some HTML is provided for you as example content.

Requirements

Clicking a tab makes it the active tab. Add a visual indication (e.g. using blue text color) for the active tab to differentiate it from the non-active tabs.
At all times, only one panel's contents should be displayed — the one corresponding to the active tab.

Notes

The focus of this question is functionality, not styling. There's no need to write any custom CSS except for highlighting the active tab.
You may modify the markup (e.g. adding ids, data attributes, replacing some tags, etc.) and use client-side rendering instead.
You may want to think about ways to improve the user experience of the application and implement them (you get bonus credit for doing that during interviews).

Asked at these companies

Unlock company signalsPremium shows which companies ask this question so you can prioritize practice by target company.

Unlock

Tabs (Official solution)

Michal GrzegorczykSenior Front End Engineer, Ofair

Solution files

1import { Component } from '@angular/core';
2
3@Component({
selector: 'app-root',
templateUrl: './app.component.html',
6})
7export class AppComponent {
tabs = [
  {
    value: 'html',
    label: 'HTML',
    panel:
      'The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.',
  },
  {
    value: 'css',
    label: 'CSS',
    panel:
      'Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML.',
  },
  {
    value: 'javascript',
    label: 'JavaScript',
    panel:
      'JavaScript, often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.',
  },
];
28}

Solution

Implementing a basic (not fully accessible) Tabs component in Angular is quite simple due to the fact that only one state value is needed: the currently active tab item. Angular also helps to keep the state and the UI in sync, which is more troublesome to do in Vanilla JavaScript.

For simplicity's sake, we'll create a Tabs component where the state is managed within the Tabs component. During interviews, do clarify with your interviewer if they prefer to manage state within the component or outside.

Inputs (API design)

Part of the complexity of building a component is designing its API. This Angular component accepts two @Input values:

items: A list of item objects. Each item is an object with the fields:
- value: A unique identifier for the tab item.
- label: The text label to show in the tab item.
- panel: The contents to show in the tab panel when the item is active.
defaultValue: The default tab item/panel to show. In case the defaultValue is not provided, we'll use the first item as the value. This is assuming that items is non-empty.

ngOnInit initializes the component's local value, click bindings call setValue, and Angular class/hidden bindings render the active tab and panel. A controlled Angular API could instead accept value as an input and emit changes with an @Output, rather than owning the selection internally. This component creates no resources that require lifecycle cleanup.

Test cases

All the provided items should be displayed.
The default active item should be reflected correctly.
Selecting the tab items updates the tabpanel's contents with the active tab's panel details.
Test that you are able to initialize multiple instances of the component, each with independent states.

Accessibility

Accessibility is an important factor for making good Tabs components. The ARIA Authoring Practices Guide for Tabs has a long list of guidelines for the ARIA roles, states, and properties to add to the various elements of a tab. Tabs II and Tabs III will focus on improving the accessibility of the Tabs component.

Resources

Tabs Patterns | ARIA Authoring Practices Guide

You must be signed in to view your saved versions

Sign in

Create an account

Tabs

Requirements

Notes

Asked at these companies

Tabs (Official solution)

Solution

Inputs (API design)

Test cases

Accessibility

Resources

You must be signed in to view your saved versions

Loading editor

Loading editor

Loading editor

JavaScript Console