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.