BaseComponent

Overview

The BaseComponent serves as a foundational layout component that provides common functionality for page title management, reference toggling, status messages with speech synthesis, and integration with backend services. It’s designed to be extended or used as a standalone component for pages requiring these core features.

Component metadata

selector

string

default:"app-base"

Component selector used in templates

standalone

boolean

default:"true"

This component is standalone and can be used independently

templateUrl

string

default:"./base.component.html"

Path to the component template

styleUrl

string

default:"./base.component.css"

Path to the component styles

Properties

Public properties

pageTitle

string

default:"''"

The current page title displayed in the component. This property has both getter and setter methods for controlled access.

isListVisible

boolean

default:"false"

Controls the visibility state of the references list. Initially hidden.

toogleLisCaption

string

default:"'[See references]'"

The caption text for the toggle button. Changes between “[See references]” and “[Hide references]” based on isListVisible state.

status_message

signal<string>

default:"signal<string>('')"

Angular signal containing the current status message. Changes trigger speech synthesis through an effect.

_pages

any[]

default:"[]"

Array of page references loaded from the environment configuration.

_page_name

string

default:"''"

The internal page name retrieved from the environment configuration.

Constructor dependencies

The component injects several services:

configService

ConfigService

Service for loading configuration and page data

backendService

BackendService

Service for backend operations including logging

route

ActivatedRoute

Angular router service for accessing route parameters

speechService

SpeechService

Service for text-to-speech functionality

PAGE_TITLE_LOG

string

Injected token containing the page title key for configuration lookup

Methods

toggleList()

Toggles the visibility of the references list and updates the caption accordingly.

toggleList(): void

Behavior:

Inverts the isListVisible state
Updates toogleLisCaption to “[See references]” when hidden or “[Hide references]” when visible
Speaks “See references” when the list becomes visible

Template usage

The component template is minimal, displaying only the page title:

<div>
    <h1>{{this.pageTitle}}</h1>
</div>

Usage example

Template
TypeScript

<app-base></app-base>

import { Component } from '@angular/core';
import { BaseComponent } from './path/to/base.component';

@Component({
  selector: 'app-my-page',
  template: '<app-base></app-base>',
  imports: [BaseComponent],
  standalone: true
})
export class MyPageComponent {}

Initialization flow

Effect registration: An effect is registered to monitor status_message signal changes
Configuration loading: configService._loadMainPages() is called asynchronously
Page data retrieval: Page data is fetched from _environment.mainPageListDictionary using the injected PAGE_TITLE_LOG key
Title setting: The page title is set and spoken using the speech service
Backend logging: The page title is logged to the backend
References loading: If available, page references are loaded into _pages array

Key features

Speech synthesis integration

The component automatically speaks:

The page title when initialized (in en-US locale)
Status messages when they change (reactive effect)
“See references” when the references list is shown

Signal-based reactivity

Uses Angular signals for the status_message property with an effect that:

effect(() => {
  if (this.status_message())
    console.log(`status_message : ${this.status_message()} `);
    this.speechService.speakTextCustom(this.status_message());
});

Error handling

Includes graceful fallback when page data is not found:

if (this._page_name && typeof this._page_name === 'string') {
  // Normal initialization
} else {
  console.warn(`Page data not found for key: ${PAGE_TITLE_LOG}`);
  this.pageTitle = PAGE_TITLE_LOG;
}

Source location

TypeScript: ~/workspace/source/src/app/_components/base/base.component.ts
Template: ~/workspace/source/src/app/_components/base/base.component.html
Styles: ~/workspace/source/src/app/_components/base/base.component.css

Layout Components

Algorithm Components

Game Components

Utility Components

Overview

Component metadata

Properties

Public properties

Constructor dependencies

Methods

toggleList()

Template usage

Usage example

Initialization flow

Key features

Speech synthesis integration

Signal-based reactivity

Error handling

Source location

Build docs developers (and LLMs) love

Layout Components

Algorithm Components

Game Components

Utility Components

​Overview

​Component metadata

​Properties

​Public properties

​Constructor dependencies

​Methods

​toggleList()

​Template usage

​Usage example

​Initialization flow

​Key features

​Speech synthesis integration

​Signal-based reactivity

​Error handling

​Source location

Build docs developers (and LLMs) love

Overview

Component metadata

Properties

Public properties

Constructor dependencies

Methods

toggleList()

Template usage

Usage example

Initialization flow

Key features

Speech synthesis integration

Signal-based reactivity

Error handling

Source location