Components

The Angular Template Website contains multiple component categories:

• UI Components
• Navigation Components
• Structural Components
• Detail Components
• Content Components (14 total)
• Utility Components
• Directives

UI Components

BackButtonComponent

Path: ui-dev/src/app/components/back-button/

Provides a standardized back navigation button across pages.

<app-back-button></app-back-button>

CategoryNavigationComponent — Detailed Logic

This component loads category totals, page navigation info, and the current category selection. It integrates:

• ConfigService (category names)
• ProjectListService (active category + pagination)
• LocalStorageService (cached totals & pages)
• GlobalFeaturesService (window width, menu signals)
• Router navigation

// Key Features
- Builds the category navigation sidebar
- Uses BehaviorSubjects to reactively update totals
- Listens for window width to control breakpoints
- Loads cached totals from Local Storage
- Loads category totals (all, categoryOne, categoryTwo, categoryThree)
- Dynamically builds navigationArray[] for rendering menu

Dynamic Navigation Structure

[
  { type: 'all', text: 'All', total: 128, link: '/compliance-library' },
  { type: 'leadership', text: 'Leadership', total: 42, ... },
  { type: 'standards', text: 'Standards', total: 56, ... },
  { type: 'security', text: 'Security', total: 30, ... }
]

Notable Methods

• setTotals() — builds totals + navigationArray
• loadCategory() — retrieves cached page data
• navigateToRoute() — routes user to new category
• togglePanel() — opens/closes mobile category panel
• itemNavigation() — handles internal/external links

This is one of the most dynamic components in your application.

<app-category-navigation></app-category-navigation>

EndOfPostComponent

Path: ui-dev/src/app/components/end-of-post/

Displayed at the end of content pages to show completion and related actions.

<app-end-of-post></app-end-of-post>

LoaderComponent

Path: ui-dev/src/app/components/loader/

Displays loading animation while content is being fetched or processed.

<app-loader></app-loader>

Structural Components

FooterComponent

Path: ui-dev/src/app/components/footer/

<app-footer></app-footer>

HeaderComponent

Path: ui-dev/src/app/components/header/

<app-header></app-header>

PageContentComponent

Path: ui-dev/src/app/components/page-content/

Responsible for rendering a full content page based on JSON or content components.

<app-page-content></app-page-content>

RightColumnComponent

Path: ui-dev/src/app/components/right-column/

<app-right-column></app-right-column>

RelatedComponentsComponent

Path: ui-dev/src/app/components/related-components/

<app-related-components></app-related-components>

Detail Components

PostDetailsComponent

Path: ui-dev/src/app/components/post-details/

Handles rendering of metadata, author, dates, and top-of-post information.

<app-post-details></app-post-details>

ProjectListComponent

Path: ui-dev/src/app/components/project-list/

Displays all projects using the project-list service and JSON sources.

<app-project-list></app-project-list>

Navigation Components

PaginationComponent — Overview

The PaginationComponent generates pagination buttons (1, 2, 3, ...) based on category totals pulled from the ProjectListService. It updates whenever totalItems$ emits a new value.

Core Responsibilities

• Subscribe to totalItems$ to determine total pages
• Generate totalPages[] array dynamically
• Load cached data before making API calls
• Scroll to top via GlobalFeaturesService

// Lifecycle:
- OnInit → subscribe to totalItems$
- Build pagination array
- OnClick → call ProjectListService.isThereCache(type, page, limit)
- Scroll page to top

Content Components

These components make up your content-driven "chapters" inside each standards, library, or leadership page. Each one represents a full article section.

AccurateBookRecordsComponent

Path: components/content/accurate-book-records/

BuildingTrustComponent

Path: components/content/building-trust/

CharitableSolicitationsComponent

Path: components/content/charitable-solicitations/

DataPrivacySecurityComponent

Path: components/content/data-privacy-security/

DoingBusinessGloballyComponent

Path: components/content/doing-business-globally/

EnvironmentalComplianceComponent

Path: components/content/environmental-compliance/

EthicalSalesPracticesComponent

Path: components/content/ethical-sales-practices/

FairCompetitionComponent

Path: components/content/fair-competition/

FairHousingComponent

Path: components/content/fair-housing/

InformationSecurityComponent

Path: components/content/information-securi