---
title: "Tabs"
slug: "tabs-widget"
updated: 2025-08-05T14:59:37Z
published: 2025-08-05T14:59:37Z
canonical: "learn.servitly.com/tabs-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.

# Tabs

You can use the standard Angular Material component named *mat-tab-group* to embed into the page a tab menu.

![mceclip0.png](https://help.servitly.com/hc/article_attachments/5882260580113/mceclip0.png)

# 

## Template Syntax

Below you can find an example of how to use the component within a template.

```xml
<mat-tab-group>
  <mat-tab label="General">
    <ng-template matTabContent>
      <include-template name="general"></include-template>
    </ng-template>
  </mat-tab>
  <mat-tab label="Consumption">
    <ng-template matTabContent>
      <gauge-widget....></gauge-widget>
      <thing-details-widget...></thing-details-widget>
    </ng-template>
  </mat-tab>
</mat-tab-group>
```

You are free to define into a single template the content of all tabs or included other templates, as you prefer.

## Component Reference

For more details on how to configure and use the mat-tab-group component, refer to the [Angular Material](https://material.angular.io/components/tabs/overview) documentation.

The *ng-template* tag is not strictly necessary, but it is recommended in case the included template, or inline defined content is complex. If it is missing, unexpected or incomplete page refreshes can occur.

#