View Details Component

The ViewDetailsComponent is designed to display detailed information about a specific entity. This component is extendable and integrates seamlessly with Angular's dependency injection to fetch and manage detailed data.

How to use the component in your app :

1. import the component :

import {ViewDetailsComponent} from '@tradinos/cms-frontend-entity';

1. The selector for component , like it :

<lib-view-details>
</lib-view-details>

Features

1. Dynamic Data Rendering: Displays detailed information about a specific entity using a Result<T> object.

2. Customizable Title: Allows developers to set a dynamic or static title for the details view.

3. Content and Loading Slots: Supports content projection for custom loading states ([loading]) and additional content ([content]).

4. Abstract Base Class for Extensibility: Extendable base classes (BaseViewDetailsComponent, ViewDetailsComponent) allow custom logic for fetching and displaying data.

Inputs

Input	Type	Description
title (optional)	string	The title of the details view, which can be dynamically set based on the entity or static text.
result(required)	Result	The data object containing the details of the entity to be displayed.

Methods

1. ngOnInit() (BaseViewDetailsComponent)

• Usage: Automatically called when the component is initialized.

1. fetchData(id: string) (Abstract Method)

• Description: Abstract method to fetch data for the entity using its unique identifier.

• Implementation: Must be implemented in the derived class.

1. setResult(result: T) (BaseViewDetailsComponent)

• Description: Sets the result data for rendering the details view.

• Usage: Called internally after fetching data.

1. title(item: T) (Abstract Method)

• Description: Abstract method to dynamically set the title based on the entity's details.

• Implementation: Must be implemented in the derived class.

For example:

<view-details [result]="result">
</view-details>

For advanced use cases, extend the BaseViewDetailsComponent or ViewDetailsComponent to add custom behavior:

import {
  ViewDetailsComponent,
} from '@tradinos/cms-frontend-entity';
export class UserDetailsComponent extends ViewDetailsComponent<User> {
  override title = (item: User) => item.name;
}

Slots

The component supports the following content projection slots:

Slot Name	Description
[loading]	Custom loading template displayed while data is being fetched.
[content]	Additional content template to display supplementary details or actions alongside the entity details.