Angular component for nested buttons

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NestedComponent } from './nested/nested.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NestedComponent],
  template: `<app-nested [buttons]="yourButtonTreeData"></app-nested>`,
  styleUrl: './app.component.css'
})
export class AppComponent {
  yourButtonTreeData = [
    {
      "name": "Offensive Plays",
      "subbuttons": [
        {
          "name": "Hit",
          "subbuttons": [
            {
              "name": "Single",
              "subbuttons": []
            },
            {
              "name": "Double",
              "subbuttons": []
            },
            {
              "name": "Triple",
              "subbuttons": []
            },
            {
              "name": "Home Run",
              "subbuttons": []
            }
          ]
        },
        {
          "name": "Walk",
          "subbuttons": []
        },
        {
          "name": "Strikeout",
          "subbuttons": []
        },
        {
          "name": "Error",
          "subbuttons": []
        }
      ]
    },
    {
      "name": "Defensive Plays",
      "subbuttons": [
        {
          "name": "Out",
          "subbuttons": [
            {
              "name": "Groundout",
              "subbuttons": []
            },
            {
              "name": "Flyout",
              "subbuttons": []
            },
            {
              "name": "Strikeout",
              "subbuttons": []
            }
          ]
        },
        {
          "name": "Error",
          "subbuttons": []
        }
      ]
    }
  ];
}

nested.component.ts

import { Component, Input } from '@angular/core';

/**
 * Represents a nested component that displays a dynamic set of buttons and allows navigation between them.
 */
@Component({
  selector: 'app-nested',
  standalone: true, // Indicates that this component does not require any parent components to function.
  template: `
    @if (currentButtons.length > 0) {
      @if (showBackButton) {
        <button (click)="handleBack()">Back</button>
      }
      @for (button of currentButtons; track button.name) {
        <button (click)="handleButtonClick(button)">{{ button.name }}</button>
      }
    }
  `
})
export class NestedComponent {
  @Input() buttons!: any[]; // Input property for receiving an array of buttons.

  buttonStack: any[][] = []; // Stack to keep track of button states for back navigation.
  currentButtons: any[] = []; // Array to hold the currently displayed buttons.
  showBackButton: boolean = false; // Flag to control the visibility of the back button.

  /**
   * Called whenever there is a change in input properties.
   */
  ngOnChanges() {
    this.currentButtons = this.buttons; // Set the current buttons to the input buttons.
    this.showBackButton = false; // Hide the back button.
    this.buttonStack = []; // Clear the button stack.
  }

  /**
   * Handles button click events.
   * @param button The clicked button object.
   */
  handleButtonClick(button: any) {
    if (button.subbuttons && button.subbuttons.length > 0) {
      this.buttonStack.push(this.currentButtons); // Push the current buttons to the button stack.
      this.currentButtons = button.subbuttons; // Set the current buttons to the subbuttons of the clicked button.
      this.showBackButton = true; // Show the back button.
    } else {
      // TODO: add logic for the buttons here
    }
  }

  /**
   * Handles back button click event.
   */
  handleBack() {
    if (this.buttonStack.length > 0) {
      this.currentButtons = this.buttonStack.pop()!; // Pop the previous buttons from the button stack.
      this.showBackButton = this.buttonStack.length > 0; // Update the visibility of the back button.
    }
  }
}