List Components
The ListComponent is a comprehensive solution for managing and displaying entity lists with CRUD operations. Its key capabilities include:
Dynamic data fetching and pagination.
Built-in CRUD action handling.
Customizable templates for rendering content.
Seamless integration with Angular routing.
This component provides a robust foundation for building dynamic data-driven applications in Angular.
How to use the component in your app :
import the component :
import {ListComponent} from '@tradinos/cms-frontend-entity';The selector for component , like it :
<lib-list></lib-list>Features
Dynamic Data Fetching: Automatically retrieves and paginates data for the list using the
CmsService.Built-in CRUD Actions: Supports creating, viewing, updating, and deleting entities.
Custom Templates: Allows developers to provide templates for data rendering, empty state, filters, headers, and actions.
Pagination and Sorting: Includes support for pagination and rows-per-page configuration.
Action Handling: Handles both CMS-level actions (e.g., create, export) and row-specific actions (e.g., edit, delete).
Seamless Navigation: Supports navigation to detail, create, or update screens.
Inputs
Input
Type
Description
templates(required)
{ [key: string]: TemplateRef<any> }
Custom templates for rendering specific parts of the component (e.g., cells, rows).
emptyDataTemplate(optional)
TemplateRef<any>
Custom template to display when there is no data.
Methods
fetchData()
Fetches data for the list using the CmsService and applies pagination and filtering.
Called automatically when the component initializes or data is refreshed.
event — Contains pagination state like the current page and page size
onPageChange(event: PaginatorState)
Handles pagination events (e.g., changing the page or number of rows per page).
event — Contains pagination state like the current page and page size.
onCmsAction(event: CmsActionEvent)
Handles global CMS actions like create, import, export, and delete multiple rows.
event — The action event triggered by the user.
onRowAction(event: BaseRowEvent)
Handles row-specific actions like view, update, or delete.
event — Contains the row item and the action type.
id(item: T): any
Returns the unique identifier for a specific row item.
Used internally to track rows.
newItem()
Navigates to the create screen or opens the create dialog.
Triggered when the "Create" button is clicked.
viewItem(item: T, newTab: boolean)
Navigates to the view-details screen or opens the details dialog for the specified item.
item: The entity to view.newTab: Whether to open the details in a new browser tab.
updateItem(item: T)
Navigates to the update screen or opens the update dialog for the specified item.
deleteItem(item: T)
Deletes the specified item.
deleteRows()
Deletes multiple selected rows.
exportFile()
Exports the data to a file (e.g., CSV or Excel).
refreshData()
Refreshes the data in the list.
Slots
Slot Name
Description
[filters]
Custom filter controls to be displayed above the table.
[header]
Custom header template for the list.
[custom]
Custom additional content to be displayed instead of table the table.
[tableStartActions]
Custom actions to be displayed at the start of the table.
[tableEndActions]
Custom actions to be displayed at the end of the table.
Last updated