App Container Component

The AppContainerComponent is a key element of the layout, designed to manage and display the main content of the application. It dynamically handles the loading state during route navigation, showing a loading indicator while content is being fetched and rendering the content once navigation is complete.

1. Import the component in your app component :

import { AppContainerComponent } from '@tradinos/cms-frontend-layout';

1. The selector for component , like it :

<lib-app-container>
   <router-outlet slot="appContent">
</lib-app-container>

App Container Component Features:

Loading State: The component exposes an @Input() loading property to manage the loading state of the content. It helps display loading indicators during data fetching or navigation.

Router Event Handling: listens to Angular’s Router events to track navigation state changes. Updates the loading flag based on navigation events like start, end, cancel, or error.

Dynamic Theming: Integrates with the ThemeService to support dynamic theming, enabling users to switch between light and dark modes or custom themes.

Localization Support: Works with the TranslationService for multi-language support, allowing seamless localization of UI elements.

PrimeNG Configuration: Configures PrimeNG UI components with the ripple effect for a modern and interactive user interface.

Customizable Content: The content inside the container can be dynamically changed using Angular's routing, allowing easy integration of different views within the layout.

How it Works:

• When a user navigates between routes, the component listens to navigation events from Angular's Router and updates the loading state based on the event.

• If the navigation starts, the loading property is set to true, triggering a loading spinner or other UI elements indicating the content is being loaded.

• When the navigation completes, is canceled, or encounters an error, the loading state is set to false, allowing the content to be displayed.

For example :

<app-container [loading]="isLoading">
  <!-- Main content goes here -->
</app-container>

The [loading] property binds to an external flag (isLoading) that controls the loading state based on the app’s data-fetching process or navigation state.