---
title: "Catalog"
slug: "catalog-widget"
updated: 2026-04-10T16:02:40Z
published: 2026-04-10T16:02:40Z
canonical: "learn.servitly.com/catalog-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Catalog

Displays the catalog with spare parts for a specific product model.

This widget must be placed in the thing dashboard, for example, in a tab called *Spare Parts*. The list of spare parts is automatically filtered by the thing in the navigation context, and so by its product model. This facilitates the search for spare parts by the user, who many times cannot identify the exact model of his product.

![Catalog](https://components-manager.servitly.com/components/Catalog_1/IMAGES/_screenshot?owner=AG_Servitly)

The default layout of this widget is a grid of tabs, but in case you do not have images for catalog items, or the user is not interested in images, you can switch to a simple list view.

## Template Syntax

Below you can find some examples of how to use the component within a template.

```xml
<catalog-widget title="Spare Parts" layoutMode="LIST"></catalog-widget>
        
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Catalog `&lt;catalog-widget&gt;`

| *Layout Mode* | The layout mode used to display elements in the catalog. **Name**: layoutMode **Type**: ENUM \| Optional **Values**: *LIST*, *GRID* **Default Value**: *GRID* `layoutMode="LIST"` |
| --- | --- |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Catalog'"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<catalog-widget    
    [title]="'Catalog'"
    layoutMode="LIST"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']"></catalog-widget>
```