Scroll Area for Angular

import { AuiScrollArea } from '@absoluteui/angular/scroll-area';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Scroll Area page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { scrollArea: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiScrollArea } from '@absoluteui/angular/scroll-area';

@Component({
  selector: 'app-activity',
  imports: [AuiScrollArea],
  template: `
    <ul auiScrollArea label="Activity" maxBlockSize="16rem">
      @for (entry of entries; track entry) {
        <li>{{ entry }}</li>
      }
    </ul>`,
})
export class ActivityComponent {
  readonly entries = Array.from({ length: 40 }, (_, i) => `Entry ${String(i + 1)}`);
}

[auiScrollArea]

Class AuiScrollArea; template reference #ref="auiScrollArea".

AbsoluteUI Scroll Area: <div auiScrollArea label="Release notes" maxBlockSize="20rem">...</div>. Enhances the element in place (native scrolling, edge fades, a focusable region while it overflows); the projected content stays Angular-managed.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
label	string		Required. Accessible name of the region.
orientation	ScrollAreaOrientation	'vertical'	Scroll axis.
maxBlockSize	string		Maximum block size as a CSS length (sets –aui-scroll-area-max-block-size).
shadows	boolean	true	Fade the edges where more content exists.