Material design components for AngularDart.

Note: this is an alpha release branch that has not been thoroughly tested. However, this is the basis for the null safety migration. Therefore, if you encounter any problems, feel free to open an issue!

The AngularDart Components Gallery contains live examples and documentation. If you can't find somethiing in the documentation generated by Pub, it's probably in the gallery.

This productive and stable set of widgets is originally written by hundreds of Googlers, make debugging and deploying your app easier. Strict latency and testing policies make these widgets an excellent fit for projects using the Angular package.

Disclaimer: This project is now maintained by the AngularDart Community. This is not a Google product in any way, official or unofficial.

Required Fonts

Add the following font downloads to the head element of your page:

  • Roboto Font (example)

    <link
  rel="stylesheet"
  type="text/css"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

  • Material Icon Font (example)

    <link
  rel="stylesheet"
  type="text/css"
  href="https://fonts.googleapis.com/icon?family=Material+Icons">

Custom component styles

The styles of these components can be customized in your project with a component's provided Sass mixins.

  1. Add a dev dependency on the sass_builder package to your pubspec.yaml:
dev_dependencies:
  sass_builder: ^2.0.0 # update for the latest version
  1. Now you can import styles and mixins from this package via dart style package imports in your Sass files.

In your .scss files:

@import 'package:ngcomponents/css/material/material';

.blue {
  color: $mat-blue;
}

Libraries

angular_components
annotations/rtl_annotation
app_layout/material_drawer_base
app_layout/material_persistent_drawer
app_layout/material_stackable_drawer
app_layout/material_temporary_drawer
auto_dismiss/auto_dismiss
builder
button_decorator/button_decorator
content/deferred_content
content/deferred_content_aware
dynamic_component/dynamic_component
focus/focus
focus/focus_activable_item
focus/focus_interface
focus/focus_item
focus/focus_list
focus/focus_trap
focus/keyboard_only_focus_indicator
forms/error_renderer
framework_stabilizers/framework_stabilizers
framework_stabilizers/testability
glyph/glyph
highlighted_text/highlighted_text
highlighted_text/highlighted_value
highlighted_text/highlighted_value.template
interfaces/has_disabled
laminate/enums/alignment
laminate/enums/position
laminate/enums/visibility
laminate/overlay/constants
laminate/overlay/module
laminate/overlay/overlay
laminate/overlay/zindexer
laminate/popup/module
laminate/portal/portal
laminate/ruler/dom_ruler
laminate/ruler/module
laminate/ruler/ng_ruler
material_button/material_button
material_button/material_button_base
material_button/material_fab
material_checkbox/material_checkbox
material_chips/material_chip
material_chips/material_chips
material_datepicker/calendar
material_datepicker/comparison
material_datepicker/comparison_option
material_datepicker/config
material_datepicker/date_input
material_datepicker/date_range_editor
material_datepicker/date_range_editor_host
material_datepicker/date_range_input
material_datepicker/material_calendar_picker
material_datepicker/material_date_grid_base
material_datepicker/material_date_range_picker
material_datepicker/material_date_time_picker
material_datepicker/material_datepicker
material_datepicker/material_month_picker
material_datepicker/material_time_picker
material_datepicker/model
material_datepicker/module
material_datepicker/next_prev_buttons
material_datepicker/preset
material_datepicker/proto/date.pb
material_datepicker/proto/date_range.pb
material_datepicker/range
material_dialog/material_dialog
material_expansionpanel/material_expansionpanel
material_expansionpanel/material_expansionpanel_auto_dismiss
material_expansionpanel/material_expansionpanel_set
material_icon/material_icon
material_icon/material_icon_toggle
material_input/base_material_input
material_input/deferred_validator
material_input/input_wrapper
material_input/material_auto_suggest_input
material_input/material_input
material_input/material_input_auto_select
material_input/material_input_default_value_accessor
material_input/material_input_error_keys
material_input/material_input_multiline
material_input/material_number_accessor
material_input/material_number_validators
material_input/material_percent_directive
material_list/material_list
material_list/material_list_item
material_list/material_list_size
material_menu/affix/base_affix
material_menu/affix/caption_affix
material_menu/affix/caption_affix.template
material_menu/affix/caption_affix_model
material_menu/affix/icon_affix
material_menu/affix/icon_affix.template
material_menu/affix/icon_affix_model
material_menu/material_fab_menu
material_menu/material_menu
material_popup/material_popup
material_progress/material_progress
material_radio/material_radio
material_radio/material_radio_group
material_ripple/material_ripple
material_select/activation_handler
material_select/display_name
material_select/handles_aria
material_select/material_dropdown_select
material_select/material_dropdown_select_accessor
material_select/material_select
material_select/material_select_base
material_select/material_select_dropdown_item
material_select/material_select_item
material_select/shift_click_selection
material_slider/material_slider
material_spinner/material_spinner
material_stepper/common
material_stepper/material_step
material_stepper/material_stepper
material_tab/fixed_material_tab_strip
material_tab/material_tab
material_tab/material_tab_panel
material_tab/tab_button
material_tab/tab_change_event
material_tab/tab_mixin
material_toggle/material_toggle
material_tooltip/material_tooltip
Components and Directives in the Material Tooltip Package.
material_tooltip/module
material_tree/material_tree
material_yes_no_buttons/material_yes_no_buttons
mixins/button_wrapper
mixins/focusable_mixin
mixins/has_tab_index
mixins/highlight_assistant_mixin
mixins/material_dropdown_base
mixins/selection_input_adapter
mixins/track_layout_changes
model/a11y/active_item
model/a11y/active_item_directive
model/a11y/focus_indicator_controller
model/a11y/keyboard_handler_mixin
model/action/async_action
model/action/delayed_action
model/collection/combined_list
model/collection/labeled_list
model/collection/list_differ
model/collection/list_tracker
model/date/date
Contains date-related models.
model/date/date_formatter
model/date/time_zone_aware_clock
model/formatters/formatter
model/math/box
model/menu/delegating_menu_item
model/menu/selectable_menu
model/observable/observable
The library provides utility classes in addition to package:observe.
model/selection/locked_limit_selection_options
model/selection/select
model/selection/selection_container
model/selection/selection_model
model/selection/selection_options
model/selection/string_selection_options
model/selection/tree_propagation_selection_model
model/selection/tree_selection_mixin
model/selection/tree_selection_options
model/ui/accepts_width
model/ui/async_display_name
model/ui/display_name
model/ui/has_factory
model/ui/has_renderer
model/ui/highlight_assistant
model/ui/highlight_provider
model/ui/highlighted_text_model
model/ui/icon
model/ui/item_sorter
model/ui/template_support
model/ui/toggle
reorder_list/reorder_events
reorder_list/reorder_list
scorecard/scoreboard
scorecard/scorecard
scorecard/scorecard_bar
simple_html/simple_html
stop_propagation/stop_propagation
theme/dark_theme
theme/module
utils/angular/css/css
utils/angular/id/id
utils/angular/imperative_view/imperative_view
utils/angular/managed_zone/angular_2
utils/angular/managed_zone/interface
utils/angular/properties/properties
utils/angular/reference/reference
utils/angular/scroll_host/angular_2
utils/angular/scroll_host/interface
utils/async/async
utils/browser/dom_iterator/dom_iterator
utils/browser/dom_service/angular_2
utils/browser/dom_service/dom_service
utils/browser/dom_service/dom_service_webdriver_testability
utils/browser/events/events
utils/browser/feature_detector/feature_detector
utils/browser/window/module
utils/browser/window/new_window_opener
utils/color/color
utils/color/material
utils/color/material_chart_colors
utils/comparators/comparators
utils/disposer/disposable_callback
utils/disposer/disposer
utils/id_generator/id_generator
utils/keyboard/global_escape_directive
utils/keyboard/keyboard
utils/numbers/denomination
utils/rate_limit_utils/rate_limit_utils
utils/showhide/showhide
utils/strings/string_utils