Frontend Directives & Utilities

Relevant source files

The following files were used as context for generating this wiki page:

• marketplace-frontend/src/app/directives/init-var/init-var.directive.ts
• marketplace-frontend/src/app/pipes/safe-html/safe-html.pipe.ts
• marketplace-frontend/src/app/providers/screen-resolution.provider.ts
• marketplace-frontend/src/app/operators/filter-boolean.ts
• marketplace-frontend/src/app/directives/init-var/init-var.module.ts
• marketplace-frontend/src/app/pipes/safe-html/safe-html.module.ts
• marketplace-frontend/src/app/components/market-header/market-header.component.html

The Frontend Directives & Utilities module provides a collection of reusable structural directives, pipes, RxJS operators, and providers. These tools streamline template logic, manage security for dynamic content, and handle environmental state like screen resolution.

This module ensures that common tasks—such as variable initialization in templates or HTML sanitization—are handled consistently across the marketplace application.

Structural Directives

The project uses structural directives to manage template-local variables, specifically for handling asynchronous data flows.

InitVarDirective

InitVarDirective allows you to create a local template variable from an expression, which is particularly useful when working with the async pipe to avoid multiple subscriptions to the same Observable.

• Selector: [initVar]
• Logic: It captures the input value and renders the template using a TemplateRef and ViewContainerRef. It provides the value to the template context as $implicit, enabling the as syntax in Angular templates.

The diagram shows the lifecycle of the initVar directive as it reacts to input data changes to manage the template view.
Sources: marketplace-frontend/src/app/directives/init-var/init-var.directive.ts, marketplace-frontend/src/app/directives/init-var/init-var.module.ts

Data Pipes

Pipes transform data for display within the UI, handling security and formatting.

SafeHtmlPipe

SafeHtmlPipe bypasses Angular's built-in security sanitization for HTML content. Use this pipe when you must render trusted HTML strings that contain tags.

• Name: safeHtml
• Action: It calls domSanitizer.bypassSecurityTrustHtml(value) to mark a string as safe for rendering in the DOM.

Pipe Name	Input Type	Return Type	Purpose
safeHtml	string	SafeHtml	Bypasses security for trusted HTML content.

Sources: marketplace-frontend/src/app/pipes/safe-html/safe-html.pipe.ts, marketplace-frontend/src/app/pipes/safe-html/safe-html.module.ts

RxJS Operators

Custom operators extend RxJS functionality to handle specific filtering logic common in the application's reactive streams.

filterBoolean

filterBoolean is a custom RxJS operator that filters out falsy values from a stream. It ensures that only "truthy" values (excluding null, undefined, 0, "", etc.) pass through to the subscriber.

• Implementation: It uses the standard filter operator with a boolean constructor check.
• Usage: Typically used in service streams where only valid data objects should trigger UI updates.

Sources: marketplace-frontend/src/app/operators/filter-boolean.ts

Global Providers and State

The application provides global utilities for detecting and responding to environmental changes.

ScreenResolutionProvider

The ScreenResolutionProvider manages responsive logic by tracking the window's dimensions.

• Functionality: It monitors the browser's viewport and categorizes the current size into predefined categories (e.g., Small, Medium, Large).
• Integration: Components like the MarketHeaderComponent use this provider to toggle UI elements (like the burger menu) based on the current screen resolution.

The sequence diagram illustrates how window resize events are processed by the provider and consumed by UI components.
Sources: marketplace-frontend/src/app/providers/screen-resolution.provider.ts, marketplace-frontend/src/app/components/market-header/market-header.component.html:1-2

Implementation Example

The MarketHeaderComponent demonstrates the integration of these utilities within a single template:

<ng-container *initVar="_onScreenResolutionChange$ | async as screenResolutionPayload">
    <div *ngIf="screenResolutionPayload.currentResolution === screenResolutionPayload.screenSize.Large">
        <!-- Desktop Menu -->
    </div>
    <button [innerHTML]="'market-header.title' | translate | safeHtml"></button>
</ng-container>

Sources: marketplace-frontend/src/app/components/market-header/market-header.component.html:1-16

Summary

Frontend Directives & Utilities provide the foundational logic for template variable management (initVar), security-conscious rendering (safeHtml), and reactive environmental awareness (ScreenResolutionProvider). These components are exported via their respective modules (InitVarModule, SafeHtmlModule) to be consumed by feature components across the marketplace platform.