AngularDart Components banner

Website pub package

AngularDart Components

Material Design UI components for AngularDart. Used at Google in production apps.

Part of the AngularDart ecosystem.

Components

Buttons

  • MaterialButtonComponent - Standard button
  • MaterialFabComponent - Floating action button
  • MaterialIconButtonComponent - Icon-only button
  • MaterialYesNoButtonsComponent - Confirm/cancel buttons

Form Controls

  • MaterialCheckboxComponent - Checkbox input
  • MaterialRadioComponent / MaterialRadioGroupComponent - Radio buttons
  • MaterialInputComponent - Text input with floating label
  • MaterialAutoSuggestInputComponent - Input with autocomplete
  • MaterialSelectComponent / MaterialDropdownSelectComponent - Dropdown selection
  • MaterialToggleComponent - Toggle switch
  • MaterialSliderComponent - Range slider
  • MaterialDatepickerComponent - Date picker
  • MaterialDateRangePickerComponent - Date range picker
  • MaterialTimePickerComponent - Time picker
  • MaterialTabComponent / MaterialTabPanelComponent - Tabs
  • MaterialMenuComponent / MaterialDropdownMenuComponent - Menus
  • MaterialTreeComponent - Tree view
  • MaterialStepperComponent - Step-by-step wizard

Layout

  • MaterialCardComponent - Card container
  • MaterialDialogComponent - Modal dialog
  • MaterialExpansionPanelComponent - Expandable panel
  • MaterialPopupComponent - Popup overlay
  • MaterialTooltipComponent / MaterialIconTooltipComponent - Tooltips
  • MaterialSpinnerComponent - Loading indicator
  • MaterialProgressComponent - Progress bar

Content

  • MaterialIconComponent - Material icons
  • MaterialGlyphComponent - Custom glyphs
  • MaterialChipComponent / MaterialChipsComponent - Chips/tags
  • MaterialListComponent / MaterialListItemComponent - List items
  • MaterialScorecardComponent / MaterialScoreboardComponent - Score display
  • MaterialReorderListComponent - Drag-and-drop reorderable list
  • SimpleHtmlComponent - Safe HTML rendering

Installation

Add to your pubspec.yaml:

dependencies:
  angulardart: ^8.0.0
  angulardart_components: ^2.0.0

Quick Start

import 'package:angulardart/angular.dart';
import 'package:angulardart_components/angulardart_components.dart';

@Component(
  selector: 'my-app',
  template: '''
    <material-button (trigger)="onClick()">Click me</material-button>
    <material-checkbox [(checked)]="isChecked">Accept terms</material-checkbox>
    <material-input label="Name" [(ngModel)]="name"></material-input>
  ''',
  directives: [
    MaterialButtonComponent,
    MaterialCheckboxComponent,
    MaterialInputComponent,
  ],
)
class AppComponent {
  bool isChecked = false;
  String name = '';
  
  void onClick() {
    print('Button clicked!');
  }
}

Material Design Theming

Customize the look and feel with Material Design themes:

import 'package:angulardart_components/css/material/material.scss';

Forms Integration

Use components with AngularDart Forms:

@Component(
  selector: 'my-form',
  template: '''
    <material-input
      label="Email"
      [ngModel]="email"
      (ngModelChange)="email = \$event"
      required>
    </material-input>
    <material-checkbox [(ngModel)]="acceptTerms">
      I accept the terms
    </material-checkbox>
  ''',
  directives: [
    MaterialInputComponent,
    MaterialCheckboxComponent,
    formDirectives,
  ],
)
class MyForm {
  String email = '';
  bool acceptTerms = false;
}

Dialogs

@Component(
  selector: 'my-app',
  template: '''
    <material-button (trigger)="showDialog()">Open Dialog</material-button>
    <material-dialog #dialog>
      <h3 header>Confirm</h3>
      <div>Are you sure?</div>
      <material-yes-no-buttons
        footer
        (yes)="dialog.close()"
        (no)="dialog.close()">
      </material-yes-no-buttons>
    </material-dialog>
  ''',
  directives: [
    MaterialButtonComponent,
    MaterialDialogComponent,
    MaterialYesNoButtonsComponent,
  ],
)
class AppComponent {
  @ViewChild('dialog')
  MaterialDialogComponent? dialog;
  
  void showDialog() {
    dialog?.open();
  }
}

Documentation

Requirements

  • Dart SDK >= 3.0.0
  • AngularDart >= 8.0.0

License

MIT License

Libraries

angulardart_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