angular_components 0.5.3+1

  • Installing
  • Versions
  • 97

Preview Release

These are the AngularDart components that Google uses to build the sophisticated, mission-critical apps that bring in much of Google’s revenue.

This productive and stable set of widgets, contributed to by hundreds of Googlers, make debugging and deploying your app easier. Strict latency and testing policies make these widgets an excellent fit for AngularDart projects.

Only a small fragment of all the components is available right now. We want developers to be able to use the package as soon as possible.

  • <glyph>
  • <material-button>
  • <material-fab>
  • <material-checkbox>
  • <material-chip>
  • <material-expansionpanel>
  • <material-progress>
  • <material-radio>
  • <material-ripple>
  • <material-spinner>
  • <material-tab>
  • <material-toggle>
  • <material-yes-no-buttons>
  • <reorder-list>
  • <acx-scorecard>
  • <material-input>
  • <material-dialog>
  • <material-popup>
  • <material-tooltip>
  • <material-list>
  • <material-select>
  • <material-tree>
  • <material-auto-suggest-input>
  • <material-date-range-picker>
  • <material-menu>
  • many more, including a fast table

At this time we are not taking pull requests, but please file an issue and we will work with you.

Officially supported browsers: The last two versions of Chrome, Edge, Firefox, and Safari.

Custom component styles

Get access to the core Material Design SASS files used to style these components by copying them and importing lib/src/css/_mixins.scss in your SASS files.

NOTE: These .scss files are not used during the build step, but we are planning to add this support. See issue #45.


NOTE: SASS files are not used during the build step of this package and are provided as reference only. These .scss files were used to generate the corresponding .css files in a separate process. We are working on a solution to include CSS generation from SASS files during the build process.

  • Add SASS files.
  • Rename .analysis_options -> analysis_options.yaml


  • Add Material Tree component.
  • Material Dialog: Add shouldShowScrollStrokes option for displaying stroke lines when the content is scrollable.
  • Material Dropdown Select: Avoid checking isSelected with deselectLabel.
  • Material Input: UpperBoundsValidator, and LowerBoundsValidator now use Comparable instead of num.
  • Material Popup: Use the real viewport (aka window) size.
  • Scorecard: Add ng-content area for a description.
  • Adjust positioning algorithm to account for scrolling within elements.
  • Migrate use of LazyEventController to StreamController.


  • Material Progress: Cleanup animations on destroy to prevent memory leaks.
  • Material Select:
    • Support deselect item in Material dropdown select with single selection model.
    • Unified template files (deleted material_select_dropdown_item.html).
    • Add support for Selectable SelectionOptions.
    • Create a ControlValueAccessor.
  • Add backspace and delete keys to KeyboardHandlerMixin.
  • Add selectedValue getter to RadioGroupSingleSelectionModel.
  • Add null check to ObservableComposite's register method.
  • Add totalEntitiesCountChange getter to table selection models.
  • Add isStandardMouseEvent utility to test for clicks without modifier keys.
  • Add string selection sanitizing options.
  • Remove NoopStream in favor of Stream.empty() as provided by the SDK.
  • Migrate use of LazyEventController to StreamController.
  • Fix bug in lazy group creation that would cause multiple groups to be created.
  • Strong mode fixes.


  • Glyph: Add baseline attribute.
  • Material Expansionpanel:
    • Allow programmatic expand and collapse requests even if the panel is disabled.
    • Change preserveWhitespace default to false.
    • Add enterAccepts flag.
  • Material Input:
    • Show counter regardless of focus.
    • Add error message to MaterialPercentInputDirective.
  • Material List: Allow pointer events when disabled.
  • Material Popup: Fix positioning when matchMinSourceWidth is true.
  • Material Ripple: Show a centered ripple on keypress.
  • Material Select:
    • Only display underline when border is also set.
    • Add useCheckMarks to use check marks instead of checkboxes.
  • Material Tooltips: Resize to fit contents.
  • Material Yes/No Buttons: Add enterAccepts flag.
  • Deprecate LazyStreamController and migrate to StreamController.
  • Migrate use of LazyEventController to StreamController.
  • Documentation fixes.
  • Strong mode fixes.


  • Rename library to angular_components.

All previous versions were published as the Pub Package named angular2_components.


  • Updated dependencies on pkg/quiver and pkg/intl.


This code is considered production quality, but depends on angular2: 3.0.0-alpha+1. The alpha tag represents the evolving nature of the AngularDart api, not code quality (3.0.0-alpha+1 is used in production Google apps).

  • Add Dynamic Component.
  • Add Material Select.
  • Add core Material Design .scss files as a reference. Currently not used during build.
  • Material Chip: Add option for icon on the left.
  • Material Expansionpanel: Add option to always display expansion icon.
  • Material Input:
    • Add an optional errorRenderer that will allow clients to override/specify their own error messages.
    • Add percent input directive.
  • Material Multiline Input: Fix 'hint' typo in inputs list.
  • Material Radio Group: Support deselecting all radio buttons for unmatched value.
  • Material Tooltip: Reduce delay.
  • i18l improvements.


This code is considered production quality, but depends on angular2: 3.0.0-alpha+1. The alpha tag represents the evolving nature of the AngularDart api, not code quality (3.0.0-alpha+1 is used in production Google apps).

Breaking Changes

  • Update for generic syntax and FutureOr type introduced in Dart SDK 1.22.0.
  • Material Toggle: Remove the deprecated color theme input.
  • Material Button, Fab, Yes/No:
    • Remove is-disabled and is-raised HTML classes used for styling. Custom styles should now use [disabled] and [raised] instead of .is-disabled and .is-raised when targeting buttons.
    • Remove z-index of 0.

Other Changes

  • Focus: Fix AX_ARIA_08 a11y issue.
  • Glyph: Option to horizontally flip glyphs when the direction is RTL.
  • Material Chips: Use :host to remove need for wrapper div.
  • Material Expansionpanel: Fix panel overflow issues.
  • Material Input:
    • Add new number accessors and validators.
    • Add ability to override/specify error messages.
    • Fix AX_TEXT_01 a11y issue.
  • Material List:
    • Block pointer events for disabled list items.
    • Remove duplicate mixin.
  • Material Popup: Disable animation delay when there is nothing to animate.
  • Material Radio: Fix styling issue, flex for IE11.
  • Material Tab Panel: Fix issue that prevents displaying tabs on initialization.
  • Material Yes/No Buttons: Add submit/cancel buttons.
  • Scorecard:
    • Add support for RTL languages in scrollable scoreboards.
    • Add support for themes.
    • Prevent exceptions during width calculations when scorecard width is auto.
  • Compute the ARIA roles only once per instance.
  • Fix dom update issues.
  • Add proper types to injected providers.
  • Add missing imports and remove unsupported Angular imports.
  • Strong mode fixes.


This code is considered production quality, but depends on angular2: 3.0.0-alpha. The alpha tag represents the evolving nature of the AngularDart api, not code quality (3.0.0-alpha is used in production Google apps).

  • Add Material List.
  • Material Expansionpanel: Add autoDismissable directive.
  • Material Progress: Handle changes to "indeterminate" state.
  • Scorecard: Add input to display vertically.
  • Update styles to meet Material UI spec.


This code is considered production quality, but depends on angular2: 3.0.0-alpha. The alpha tag represents the evolving nature of the AngularDart api.

  • Add Material Tooltip.
  • Material Ripple:
    • Add GPU acceleration.
    • rippleBindings have been removed as they are no longer used.
  • Internal updates for compatibility with Angular 3.0.0-alpha.
  • Material Expansion Panel:
    • Fix CSS rule that causes header text to turn gray on hover/focus.
    • Support auto-focus on a content element when the material expansion panel expands.
    • Fix Yes/No button ordering.
  • Material Input:
    • Add a blur update value accessor.
    • Add multiple attribute.
    • Remove unused properties: rows and maxRows.
  • Material Input Multiline: Add auto grow in size.
  • Material Popup: Update change detection for OnPush.
  • Material Progress: Update to animate when main thread is blocked.
  • Material Radio: Adjust size to 24px.
  • Material Yes/No: Add toggle for yes button visibility.
  • Scorecard: Update change detection.
  • Fix flipped alignment positions when isRtl is used.
  • Fix popup event handling.
  • Remove 'uninitialized' as a default value.
  • Remove unused CSS rules.
  • Update styles to meet Material UI spec.
  • Bug fixes.
  • Strong Mode fixes.


  • Add Material Popup, a basic popup component.
  • Update Material Checkbox icon size.
  • Cleanup framework stabilizers since issue #24843 in the Dart SDK has been resolved.
  • Remove unused files.


  • Rollup of recent changes.
  • Includes fix for breaking change in Angular 2.2.0.


  • Add a modal dialog window called material_dialog.
  • Rename MultilineMaterialInputComponent to MaterialMultilineInputComponent.
  • Make the deferredContent placeholder element optional, off by default.
  • Remove InputTextModel.
  • Cleanup linter warnings.
  • Refactor color support.
  • Many components now support removing whitespace in the templates.
  • Refactor tab key index to a mixin.
  • Various updates and cleanup.


  • Small change to


  • Initial Open Source release.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  angular_components: "^0.5.3+1"

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

      import 'package:angular_components/angular_components.dart';
Version Uploaded Documentation Archive
0.8.0 Oct 17, 2017 Go to the documentation of angular_components 0.8.0 Download angular_components 0.8.0 archive
0.7.1 Sep 28, 2017 Go to the documentation of angular_components 0.7.1 Download angular_components 0.7.1 archive
0.7.0 Sep 19, 2017 Go to the documentation of angular_components 0.7.0 Download angular_components 0.7.0 archive
0.6.0 Aug 30, 2017 Go to the documentation of angular_components 0.6.0 Download angular_components 0.6.0 archive
0.5.3+1 Jul 12, 2017 Go to the documentation of angular_components 0.5.3+1 Download angular_components 0.5.3+1 archive
0.5.3 Jul 7, 2017 Go to the documentation of angular_components 0.5.3 Download angular_components 0.5.3 archive
0.5.2 May 24, 2017 Go to the documentation of angular_components 0.5.2 Download angular_components 0.5.2 archive
0.5.1 May 3, 2017 Go to the documentation of angular_components 0.5.1 Download angular_components 0.5.1 archive
0.5.0 Apr 27, 2017 Go to the documentation of angular_components 0.5.0 Download angular_components 0.5.0 archive
0.9.0-alpha+12 May 18, 2018 Go to the documentation of angular_components 0.9.0-alpha+12 Download angular_components 0.9.0-alpha+12 archive

All 29 versions...


We analyzed this package on May 24, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.54.0
  • pana: 0.11.1


Describes how popular the package is relative to other packages. [more]
99 / 100
Code health derived from static analysis. [more]
97 / 100
Reflects how tidy and up-to-date the package is. [more]
92 / 100
Overall score:
Weighted score of the above. [more]
Learn more about scoring.


Detected platforms: web

Primary library: package:angular_components/angular_components.dart with components: html, js.


  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 11 errors 214 hints.

    Strong-mode analysis of lib/src/laminate/components/popup/popup.dart failed with the following error:

    line: 80 col: 14
    The expression in an assert must be of type 'bool'.

    Strong-mode analysis of lib/src/laminate/overlay/src/overlay_dom_service.dart failed with the following error:

    line: 42 col: 12
    The expression in an assert must be of type 'bool'.

    Similar analysis of the following files failed:

    • lib/src/model/action/src/async_action_controller.dart (error)
    • lib/src/model/selection/src/interfaces/selectable.dart (error)
    • lib/src/model/selection/tree_selection_options.dart (error)
    • lib/src/model/ui/has_renderer.dart (error)
    • lib/src/utils/async/src/async_where.dart (error)
    • lib/src/utils/async/src/rate_limit.dart (error)
    • lib/src/utils/disposer/disposer.dart (error)
    • lib/angular_components.dart (hint)
    • lib/src/components/annotations/rtl_annotation.dart (hint)
    • lib/src/components/auto_dismiss/auto_dismiss.dart (hint)
    • lib/src/components/button_decorator/button_decorator.dart (hint)
    • lib/src/components/content/deferred_content.dart (hint)
    • lib/src/components/dynamic_component/dynamic_component.dart (hint)
    • lib/src/components/focus/focus.dart (hint)
    • lib/src/components/focus/focus_activable_item.dart (hint)
    • lib/src/components/focus/focus_item.dart (hint)
    • lib/src/components/focus/focus_list.dart (hint)
    • lib/src/components/focus/focus_trap.dart (hint)
    • lib/src/components/focus/keyboard_only_focus_indicator.dart (hint)
    • lib/src/components/glyph/glyph.dart (hint)
    • lib/src/components/material_button/material_button.dart (hint)
    • lib/src/components/material_button/material_button_base.dart (hint)
    • lib/src/components/material_button/material_fab.dart (hint)
    • lib/src/components/material_checkbox/material_checkbox.dart (hint)
    • lib/src/components/material_chips/material_chip.dart (hint)
    • lib/src/components/material_chips/material_chips.dart (hint)
    • lib/src/components/material_dialog/material_dialog.dart (hint)
    • lib/src/components/material_expansionpanel/material_expansionpanel.dart (hint)
    • lib/src/components/material_expansionpanel/material_expansionpanel_auto_dismiss.dart (hint)
    • lib/src/components/material_expansionpanel/material_expansionpanel_set.dart (hint)
    • lib/src/components/material_input/base_material_input.dart (hint)
    • lib/src/components/material_input/deferred_validator.dart (hint)
    • lib/src/components/material_input/material_input.dart (hint)
    • lib/src/components/material_input/material_input_default_value_accessor.dart (hint)
    • lib/src/components/material_input/material_input_multiline.dart (hint)
    • lib/src/components/material_input/material_number_accessor.dart (hint)
    • lib/src/components/material_input/material_number_validators.dart (hint)
    • lib/src/components/material_input/material_percent_directive.dart (hint)
    • lib/src/components/material_list/material_list.dart (hint)
    • lib/src/components/material_list/material_list_item.dart (hint)
    • lib/src/components/material_popup/material_popup.dart (hint)
    • lib/src/components/material_progress/material_progress.dart (hint)
    • lib/src/components/material_radio/material_radio.dart (hint)
    • lib/src/components/material_radio/material_radio_group.dart (hint)
    • lib/src/components/material_ripple/material_ripple.dart (hint)
    • lib/src/components/material_select/display_name.dart (hint)
    • lib/src/components/material_select/dropdown_button.dart (hint)
    • lib/src/components/material_select/material_dropdown_select.dart (hint)
    • lib/src/components/material_select/material_select.dart (hint)
    • lib/src/components/material_select/material_select_dropdown_item.dart (hint)
    • lib/src/components/material_select/material_select_item.dart (hint)
    • lib/src/components/material_spinner/material_spinner.dart (hint)
    • lib/src/components/material_tab/fixed_material_tab_strip.dart (hint)
    • lib/src/components/material_tab/material_tab.dart (hint)
    • lib/src/components/material_tab/material_tab_panel.dart (hint)
    • lib/src/components/material_tab/src/navigation_bar.dart (hint)
    • lib/src/components/material_tab/tab_button.dart (hint)
    • lib/src/components/material_toggle/material_toggle.dart (hint)
    • lib/src/components/material_tooltip/module.dart (hint)
    • lib/src/components/material_tooltip/src/icon_tooltip.dart (hint)
    • lib/src/components/material_tooltip/src/ink_tooltip.dart (hint)
    • lib/src/components/material_tooltip/src/paper_tooltip.dart (hint)
    • lib/src/components/material_tooltip/src/tooltip.dart (hint)
    • lib/src/components/material_tooltip/src/tooltip_controller.dart (hint)
    • lib/src/components/material_tooltip/src/tooltip_source.dart (hint)
    • lib/src/components/material_tooltip/src/tooltip_target.dart (hint)
    • lib/src/components/material_tree/src/group/material_tree_group.dart (hint)
    • lib/src/components/material_tree/src/group/material_tree_group_flat.dart (hint)
    • lib/src/components/material_tree/src/material_tree_dropdown.dart (hint)
    • lib/src/components/material_tree/src/material_tree_filter.dart (hint)
    • lib/src/components/material_tree/src/material_tree_impl.dart (hint)
    • lib/src/components/material_tree/src/material_tree_node.dart (hint)
    • lib/src/components/material_yes_no_buttons/material_yes_no_buttons.dart (hint)
    • lib/src/components/mixins/track_layout_changes.dart (hint)
    • lib/src/components/reorder_list/reorder_list.dart (hint)
    • lib/src/components/scorecard/scoreboard.dart (hint)
    • lib/src/components/scorecard/scorecard.dart (hint)
    • lib/src/components/scorecard/src/scorecard_bar.dart (hint)
    • lib/src/components/theme/dark_theme.dart (hint)
    • lib/src/components/theme/module.dart (hint)
    • lib/src/css/acux/zindexer.dart (hint)
    • lib/src/framework_stabilizers/testability.dart (hint)
    • lib/src/laminate/components/modal/modal.dart (hint)
    • lib/src/laminate/components/modal/src/modal_controller_directive.dart (hint)
    • lib/src/laminate/components/popup/hierarchy.dart (hint)
    • lib/src/laminate/components/popup/src/popup_source_directive.dart (hint)
    • lib/src/laminate/overlay/module.dart (hint)
    • lib/src/laminate/overlay/src/render/overlay_dom_render_service.dart (hint)
    • lib/src/laminate/overlay/src/render/overlay_style_config.dart (hint)
    • lib/src/laminate/popup/module.dart (hint)
    • lib/src/laminate/popup/src/dom_popup_source.dart (hint)
    • lib/src/laminate/popup/src/popup_controller_base.dart (hint)
    • lib/src/laminate/popup/src/popup_directive.dart (hint)
    • lib/src/laminate/popup/src/popup_ref.dart (hint)
    • lib/src/laminate/popup/src/popup_service.dart (hint)
    • lib/src/laminate/popup/src/popup_size_provider_directive.dart (hint)
    • lib/src/laminate/popup/src/popup_source.dart (hint)
    • lib/src/laminate/popup/src/popup_source_directive.dart (hint)
    • lib/src/laminate/portal/portal.dart (hint)
    • lib/src/laminate/ruler/dom_ruler.dart (hint)
    • lib/src/laminate/ruler/module.dart (hint)
    • lib/src/laminate/ruler/ng_ruler.dart (hint)
    • lib/src/model/collection/list_tracker.dart (hint)
    • lib/src/model/selection/src/delegating_selection_model.dart (hint)
    • lib/src/model/selection/src/multi_selection_model_impl.dart (hint)
    • lib/src/model/selection/src/noop_selection_model_impl.dart (hint)
    • lib/src/model/selection/src/single_selection_model_impl.dart (hint)
    • lib/src/model/selection/string_selection_options.dart (hint)
    • lib/src/model/selection/table_selection_model.dart (hint)
    • lib/src/model/ui/highlighted_text_model.dart (hint)
    • lib/src/model/ui/template_support.dart (hint)
    • lib/src/utils/angular/imperative_view/imperative_view.dart (hint)
    • lib/src/utils/angular/managed_zone/angular_2.dart (hint)
    • lib/src/utils/angular/managed_zone/src/managed_zone.dart (hint)
    • lib/src/utils/angular/reference/reference.dart (hint)
    • lib/src/utils/async/src/simple_stream.dart (hint)
    • lib/src/utils/async/src/throttle_stream.dart (hint)
    • lib/src/utils/async/src/zoned_async.dart (hint)
    • lib/src/utils/browser/dom_service/angular_2.dart (hint)
    • lib/src/utils/browser/dom_service/dom_service.dart (hint)
    • lib/src/utils/browser/events/events.dart (hint)
    • lib/src/utils/browser/window/module.dart (hint)
    • lib/src/utils/browser/window/new_window_opener.dart (hint)
    • lib/src/utils/numbers/denomination.dart (hint)
  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use angular_components.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.23.0 <2.0.0
angular2 >=3.0.0 <4.0.0 3.1.0+1
collection ^1.14.0 1.14.9
fixnum ^0.10.5 0.10.7
intl >=0.14.0 <0.16.0 0.15.6
js ^0.6.1 0.6.1
logging ^0.11.2 0.11.3+1
meta ^1.0.4 1.1.5
observable >=0.14.0+1 <0.21.0 0.20.4+3 0.22.1+2
perf_api ^0.1.0 0.1.0
quiver >=0.22.0 <0.26.0 0.25.0 0.29.0+1
uuid ^0.5.3 0.5.3 1.0.0
Transitive dependencies
analyzer 0.30.0+4 0.32.0
args 0.13.7 1.4.3
async 2.0.7
barback 0.15.2+16
build 0.9.3 0.12.6
build_barback 0.2.2 0.5.0+4
charcode 1.1.1
cli_util 0.1.3
code_builder 1.0.4 3.0.3
code_transformers 0.5.1+5
convert 2.0.1
crypto 2.0.3
csslib 0.13.7+1 0.14.4
dart_style 1.0.9+1 1.0.14
front_end 0.1.0-alpha.4.1 0.1.0
func 1.0.0
glob 1.1.5
html 0.13.3
isolate 1.1.0 2.0.0
kernel 0.3.0-alpha.1.1 0.3.0
matcher 0.12.2+1
package_config 1.0.3
path 1.5.1
plugin 0.2.0+2
pool 1.3.5
protobuf 0.5.5 0.8.0
source_gen 0.5.10+1 0.8.1+1
source_maps 0.10.5
source_span 1.4.0
stack_trace 1.9.2
string_scanner 1.0.2
typed_data 1.1.5
utf 0.9.0+4
watcher 0.9.7+8
yaml 2.1.14