Displays a sidebar-style information panel with tabs.

Info drawer screenshot

Basic usage


There are three regions where you can add your own content using <div> elements with the following names (as with the Info drawer layout component):

  • info-drawer-title
  • info-drawer-buttons
  • info-drawer-content

The tabs are added using one or more <adf-info-drawer-tab> elements, which can have any content you like:

<adf-info-drawer [showHeader]="true" title="Activities" (currentTab)="getActiveTab($event)">
    <div info-drawer-buttons>
        <mat-icon (click)="close()">clear</mat-icon>

    <adf-info-drawer-tab label="Activity">

    <adf-info-drawer-tab label="Details">


Class members


NameTypeDefault valueDescription
selectedIndexnumber0The selected index tab.
showHeaderbooleantrueThe visibility of the header.
titlestring | nullnullThe title of the info drawer (string or translation key).


currentTabEventEmitter<number>Emitted when the currently active tab changes.


This is a variant of the Info Drawer Layout component that displays information in tabs. You can use the Info drawer tab subcomponent to add tabs (as shown in the example) and the currentTab output property to select the currently active tab.

See also

© 2023 Alfresco Software, Inc. All Rights Reserved.