Defines the implementation of an item in a Card View component.


export interface CardViewItem {
    label: string;
    value: any;
    key: string;
    default?: any;
    type: string;
    displayValue: string;
    editable?: boolean;
    icon?: string;
    data?: any;


labelstring""Item label
valueanyThe original data value for the item
keystring""Identifying key (important when editing the item)
defaultanyThe default value to display if the value is empty
displayValuestring""The value to display
editablebooleanfalseToggles whether the item is editable
clickablebooleanfalseToggles whether the item is clickable
iconstringThe material icon to show beside clickable items
dataanynullAny custom data which is needed to be provided and stored in the model for any reason. During an update or a click event this can be a container of any custom data which can be useful for 3rd party codes.


Card item components are loaded dynamically by the main Card View component. This allows you to define your own component for a custom item type.

For example, follow the steps given below to add a stardate type to display Captain Picard's birthday (47457.1):

  1. Define the model for the custom type.

    Your model must extend the CardViewBaseItemModel class and implement the CardViewItem and DynamicComponentModel interfaces. See the Card View Text Item model source for an example of how to do this.

    import { CardViewBaseItemModel, CardViewItem, DynamicComponentModel } from '@alfresco/adf-core';
    class CardViewStarDateItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
        type: string = 'star-date';
        get displayValue() {
            return this.convertToStarDate(this.value) || this.default;
        private convertToStarDate(starTimeStamp: number): string {
            // Do the magic
  2. Define the component for the custom type.

    The selector is not important given that this is a dynamically loaded component. You can choose any name for the selector, but it makes sense to follow the Angular standards.

        selector: 'card-view-stardateitem' /* For example */
    class CardViewStarDateItemComponent {
        property: CardViewStarDateItemModel;
        editable: boolean;
        constructor(private cardViewUpdateService: CardViewUpdateService) {}
        isEditable() {
            return this.editable &&;
        showStarDatePicker() {

    See the Card View Text Item component source or the Card View Date Item component source for examples of how to make the field editable.

  3. Bind your custom component to the custom model type so that Angular's dynamic component loader can find it.

        providers: [ CardItemTypeService ] /* If you don't want to pollute the main instance of the CardItemTypeService service */
    class SomeParentComponent {
        constructor(private cardItemTypeService: CardItemTypeService) {
            cardItemTypeService.setComponentTypeResolver('star-date', () => CardViewStarDateItemComponent);

    The Card Item Type service maps each item type to the corresponding component. See its doc page for further details.

See also

© 2023 Alfresco Software, Inc. All Rights Reserved.