The show more component indicates the possibility to load more content than currently visible. Use it when long lists of items are split into smaller sets to load them one by one or as trigger of an expandable panel to toggle the visibility of certain content on a page.

<ul>
  <li *ngFor="let entry of displayData">{{ entry }}</li>
</ul>
<button dt-show-more (click)="loadMore()" *ngIf="itemsLeft > 0">
  Show {{ itemsLeft > noOfItems ? noOfItems : itemsLeft }} more
</button>
<p *ngIf="itemsLeft < 1" style="text-align: center">No more data available.</p>

Imports

You have to import the DtShowMoreModule when you want to use the dt-show-more.

@NgModule({
  imports: [DtShowMoreModule],
})
class MyModule {}

Initialization

To apply the show more component, use the <button dt-show-more> element. Use the content to add a show more label above the arrow icon.

Inputs

Name Type Default Description
<ng-content> The text which gets displayed above the arrow.
showLess boolean false Whether on click the content that has been expanded is collapsed again. When true the show more arrow points upwards and the show more label is hidden.
ariaLabelShowLess string Show less The aria label for the show less button without text.
(changed) event<void> The event which gets fired when the state changes. The event is fired when the user clicks on the component, as well as using SPACE or ENTER keys.

Show more in use

The label text should describe how many more items are loaded on click. The show more button is not displayed when there are no more items to load. Instead a short note that there is no more data is shown.

<ul>
  <li *ngFor="let entry of displayData">{{ entry }}</li>
</ul>
<button dt-show-more (click)="loadMore()" *ngIf="itemsLeft > 0">
  Show {{ itemsLeft > noOfItems ? noOfItems : itemsLeft }} more
</button>
<p *ngIf="itemsLeft < 1" style="text-align: center">No more data available.</p>

Section toggle

In case the component is used as a trigger to expand a content section, there is no label shown when the component is in close-button-state (i.e. showLess is true).

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<dt-expandable-panel #panel>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</dt-expandable-panel>
<button
  dt-show-more
  [showLess]="panel.expanded"
  (click)="panel.expanded ? panel.close() : panel.open()"
  ariaLabelShowLess="Collapse content"
>
  Show more
</button>

Disabled

When it's not possible or the user is not allowed to load more entries or to expand a section, the component gets disabled.

<button dt-show-more [disabled]="true">Show more</button>

Dark background

The show more component can be placed on dark background.

<section class="dt-example-dark" dtTheme=":dark">
  <button dt-show-more [showLess]="showLess" (click)="showLess = !showLess">
    Toggle more/less
  </button>
</section>

Accessibility

When the component is used as an expandable panel trigger, add a label using the ariaLabelShowLess input to provide a text alternative for the button without a text.