Angular Components

The Angular team maintains several specialized npm packages for building UI and implementing common interaction patterns:

• @angular/aria: A collection of headless, accessible directives that implement common WAI-ARIA patterns.
• @angular/cdk: A library designed to help you author custom UI components using common interaction patterns.
• @angular/material: Pre-built UI components following the Material Design specification.
• @angular/google-maps: Angular components built on top of the Google Maps JavaScript API.
• @angular/youtube-player: An Angular component built on top of the YouTube Player API.

Version 10.2.0-rc.0 added the following to the Google Maps component:

• Layer Components: Added support for general Layer components.
• KML Layer: Added a specific KML Layer component to Google Maps.

Version 10.2.0-rc.0 introduced significant experimental features:

• Combobox: Added a combobox base, additional open actions, a combobox-popup directive, and made CdkListbox compatible with CdkCombobox.
• Menu:
  • Added support for inline menus.
  • Added a context menu trigger directive.
  • Added roving tab index to menu items.
  • Added ability to close menus when clicking outside the menu tree.
  • Enabled keyboard handling for context menus.
  • Added ability to open/close menus on mouse click and hover.
• Selection: Merged cdk-selection into the master branch.

Version 10.2.0-rc.0 introduced several MDC-based (Material Design Components) features:

• MDC-based Components: Added MDC-based versions of mat-autocomplete, dialog, mat-option, and mdc-core entry points.
• MDC-based Modules: Implemented mdc-list (selection list), mdc-radio, mdc-snack-bar, mdc-table, and mdc-tabs.
• Menubar: Extends components from CDK menu equivalents.
• Testing: Added test harnesses for mdc-card, mdc-radio, mdc-snack-bar, mdc-table, mdc-tabs, and mdc-core (option and option group).

<mat-progress-bar> is a horizontal progress bar used to indicate the status of an operation. It supports different modes depending on whether the progress percentage is known or if the duration is unknown.

<mat-progress-bar></mat-progress-bar>

This package provides the Material Design 3 (M3) design tokens used by Angular Material. These tokens are a fork of the official @material/tokens package (specifically version v0_161 as of July 22nd, 2024).

Key characteristics of this implementation:

• Curated Token Set: Tokens that are not actively utilized by the Angular Material components have been moved to an unused directory to reduce noise.
• Standardized Formatting: The tokens have been reformatted to comply with the Angular repository's linting rules.

Angular Material v5.1.0 included the following performance optimizations:

• Ripple:
  • Does not register events if ripples are disabled initially.
  • Uses passive event listeners.

The @angular/aria/tabs package provides accessible tab components including Tabs, TabList, Tab, TabPanel, and TabContent.

• Tabs ([ngTabs]): The root container that manages the collection of panels.
• TabList ([ngTabList]): The container for the tab triggers (the clickable headers).
• Tab ([ngTab]): An individual tab trigger. It requires a value input.
• TabPanel ([ngTabPanel]): The container for the content associated with a specific tab. It requires a value input that matches a Tab's value.
• TabContent (ng-template[ngTabContent]): Used inside a TabPanel to define the content that should be rendered.

mat-grid-list is a component that arranges cells into a grid-based layout. It requires a cols attribute to define the number of columns. The number of rows is automatically calculated based on the number of items and the column count.

<mat-grid-list cols="4">
  <mat-grid-tile>Tile 1</mat-grid-tile>
  <mat-grid-tile>Tile 2</mat-grid-tile>
</mat-grid-list>

Version 10.2.0-rc.0 introduced several updates to Angular Material:

• Autocomplete: Added support for variable option height.
• Datepicker:
  • Added getValidDateOrNull method.
  • Added support for dateClass on year and multi-year views.
  • Improved range selection strategy to pick up custom date adapters.
• Form Field: Exposed the label content element ID for use with custom controls.
• Mat-Paginator: Added the ability to optionally style the mat-paginator form-field.
• Testing: Added test harnesses for chips, icon, and stepper modules.

The @angular/aria/toolbar package provides primitives for building accessible toolbars. It consists of three main components: Toolbar, ToolbarWidgetGroup, and ToolbarWidget.

• Toolbar: The root container that manages the overall state, orientation, and value of the toolbar.
• ToolbarWidgetGroup: A grouping mechanism within a toolbar that can manage multiple widgets, supporting both single and multi-selection modes.
• ToolbarWidget: An individual interactive item within a toolbar or widget group.

These components use Angular Signals for reactive state management (e.g., value, disabled, orientation).

// Example of the structural relationship
<div ngToolbar>
  <div ngToolbarWidgetGroup [multi="true">
    <button ngToolbarWidget [value="'option1'">Option 1</button>
    <button ngToolbarWidget [value="'option2'">Option 2</button>
  </div>
</div>

Version 10.2.0-rc.0 introduced several updates to the Component Dev Kit (CDK):

• TypeScript Support: Added support for TypeScript 4.0.
• Collections: Extracted view repeater strategies from virtualForOf and CDK table.
• Testing Improvements:
  • Added test harnesses for the datepicker module.
  • Added optional excludes to the TestElement text method.
  • Enabled pointer events on hover and mouseAway during testing.
  • Fixed regex filtering in testing utilities.