Expand

Expand wraps long content, shows it at a limited height with a fade, and lets the user reveal the full content with a “show more” style button.

Use it for long descriptions, comments, changelog entries, release notes, activity text, terms snippets, card descriptions, and compact summaries where the page should stay scannable. Do not use it for independent collapsible sections, trees, navigation to another page, tabs, steppers, or as a generic container.

Key features:

Collapsed preview: Limits long projected content to a controlled height.
Fade edge: Uses a visual fade to show that more content is available.
Controlled state: Supports expanded and expandedChange.
Custom labels: Supports custom expand and collapse button labels.

The NgStarter Angular Expand component lets you collapse one long content block to a limited-height preview with a fade and show-more control. Use for long descriptions, comments, changelog entries, release notes, activity text, terms snippets, card descriptions, and compact summaries where the page should stay scannable but users can reveal the full content inline. It includes examples for Basic Expand, Show button if expanded, Custom button labels, and Expand show button if expanded.

Basic Expand

Use Expand when one long content block should start collapsed and let users reveal the full text without leaving the current page.

If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides. If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.If you were hoping I had a magical, complete solution to this problem,
I’m sorry to disappoint you. There’s no one solution that achieves the desired effect without downsides.

Show button if expanded

Show the button while expanded when users should be able to collapse the same content again.

Custom button labels

Customize labels when “Show more” and “Show less” do not fit the product language or content type.