LandingComponent

Overview

The LandingComponent creates a dynamic landing page that displays a collection of navigation icons loaded from the application configuration. It supports both standard routing and query parameter-based navigation, making it flexible for various navigation patterns in the PWA.

Component metadata

selector

string

default:"app-landing"

Component selector used in templates

standalone

boolean

default:"true"

This component is standalone with explicit imports

templateUrl

string

default:"./landing.component.html"

Path to the component template

styleUrl

string

default:"./landing.component.css"

Path to the component styles

imports

array

default:"[RouterLink]"

Required imports: RouterLink for navigation functionality

Inputs

LandingPage

string

default:"undefined"

Optional input to specify which landing page configuration to load. If not provided, defaults to PAGE_ANGULAR_DEMO_LANDING from the environment configuration.

Properties

_pages_nested

any[]

default:"[]"

Array of nested page objects containing navigation data including icons, routes, and query parameters. Each page object is enhanced with a queryParamsObj property after parsing.

Constructor dependencies

configService

ConfigService

Service for loading and accessing application configuration including page data

Methods

ngAfterViewInit()

Angular lifecycle hook that triggers the landing page loading after the view is initialized.

ngAfterViewInit(): void

loadLandingPage()

Loads the landing page configuration and processes nested page data.

loadLandingPage(): void

Process:

Calls configService._loadMainPages() to ensure configuration is loaded
Retrieves page data from _environment.mainPageListDictionary
Uses LandingPage input if provided, otherwise defaults to configured page name
Loads pages_nested array from the configuration
Transforms each page by parsing query parameter strings into objects

parseQueryParams()

Parses query parameter strings into Angular Params objects for routing.

parseQueryParams(str: string): Params

str

string

Query parameter string to parse (e.g., "{key1: 'value1', key2: 'value2'}")

Returns: Params object with parsed key-value pairs Features:

Validates input string
Removes curly braces, quotes, and extra whitespace
Splits into key-value pairs
Returns empty object for invalid input
Includes debug logging for invalid inputs

Example transformation:

// Input: "{page: 'home', id: '123'}"
// Output: { page: 'home', id: '123' }

Template structure

The component template renders a centered, animated grid of navigation icons:

<div align="center" class="animate">
  @for (page of this._pages_nested; track page) {
    <span>
      @if (page.queryParams) {
        <a [routerLink]="[page.routerLink]" [queryParams]="page.queryParamsObj">
          <img [src]="[page.text]" [alt]="'Logo'" class="me-1" style="width: 45px" />
        </a>
      } @else {
        <a [routerLink]="[page.url]">
          <img [src]="[page.text]" [alt]="'Logo'" class="me-1" style="width: 45px" />
        </a>
      }
    </span>
  }
</div>

Key features:

Uses Angular’s @for control flow syntax
Conditionally renders links with or without query parameters
Each icon is 45px wide with right margin spacing
Centered alignment with animation class

Usage examples

Basic usage
With custom page
In standalone component

<app-landing></app-landing>

<app-landing [LandingPage]="'MyCustomLandingPage'"></app-landing>

import { Component } from '@angular/core';
import { LandingComponent } from './path/to/landing.component';

@Component({
  selector: 'app-home',
  template: '<app-landing></app-landing>',
  imports: [LandingComponent],
  standalone: true
})
export class HomeComponent {}

Page object structure

Each page in _pages_nested contains:

text

string

Image source URL for the navigation icon

routerLink

string

Router link path (used when query parameters are present)

url

string

Direct URL path (used when no query parameters)

queryParams

string

Raw query parameter string to be parsed

queryParamsObj

Params

Parsed query parameters object (added by parseQueryParams)

Initialization flow

Component is instantiated with ConfigService injected
ngAfterViewInit() lifecycle hook is called
loadLandingPage() is invoked
Configuration is loaded asynchronously via configService._loadMainPages()
Page name is determined from LandingPage input or configuration
Nested pages array is retrieved and processed
Each page’s query parameters are parsed and added as queryParamsObj
Template renders navigation icons with appropriate routing

Routing strategies

The component supports two routing approaches:

With query parameters

<a [routerLink]="[page.routerLink]" [queryParams]="page.queryParamsObj">
  <img [src]="[page.text]" ... />
</a>

Without query parameters

<a [routerLink]="[page.url]">
  <img [src]="[page.text]" ... />
</a>

Error handling

Includes validation and warnings:

if (pageName && typeof pageName === 'string') {
  // Load pages
} else {
  console.warn(`Page data not found for key: ${pageName}`);
}

Source location

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

Layout Components

Algorithm Components

Game Components

Utility Components

Overview

Component metadata

Inputs

Properties

Constructor dependencies

Methods

ngAfterViewInit()

loadLandingPage()

parseQueryParams()

Template structure

Usage examples

Page object structure

Initialization flow

Routing strategies

With query parameters

Without query parameters

Error handling

Source location

Build docs developers (and LLMs) love

Layout Components

Algorithm Components

Game Components

Utility Components

​Overview

​Component metadata

​Inputs

​Properties

​Constructor dependencies

​Methods

​ngAfterViewInit()

​loadLandingPage()

​parseQueryParams()

​Template structure

​Usage examples

​Page object structure

​Initialization flow

​Routing strategies

​With query parameters

​Without query parameters

​Error handling

​Source location

Build docs developers (and LLMs) love

Overview

Component metadata

Inputs

Properties

Constructor dependencies

Methods

ngAfterViewInit()

loadLandingPage()

parseQueryParams()

Template structure

Usage examples

Page object structure

Initialization flow

Routing strategies

With query parameters

Without query parameters

Error handling

Source location