angular_components 0.9.0-alpha+5

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

Material design components for AngularDart. Powering some of Google's most sophisticated and mission-critical applications.

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 projects using the Angular package.

This is a continually growing set of widgets. See the example gallery and the documentation for a full list. Recent additions include:

• Material Menu
• Material Auto-suggest Input
• Material Select Searchbox

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.

Package build_runner support

As of angular: 5.0.0-alpha+5 the pub transformer has been removed in favor of code generation through package build. To build your project with build_runner:

1. Add two dev dependencies to your pubspec.yaml file:

dev_dependencies:
  build_runner: ^0.7.8
  build_web_compilers: ^0.2.1

2. Run pub get on your package.
3. Build your package:

pub run build_runner build

Or run a local development server with a file watcher and incremental rebuilds:

pub run build_runner serve

Useful links

• Example gallery
• AngularDart Components resources:
  • About AngularDart Components
  • Google I/O 2017 codelab
  • Dart Summit 2016 codelab
  • API reference
• AngularDart resources:
  • AngularDart documentation
  • angular pub package
• Material Design site

Required Icon Font

For icons to appear, add the following icon font download to your page. 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: ^1.1.2 # update for the latest version

2. 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:angular_components/css/material/material';

.blue {
  color: $mat-blue;
}

Project Roadmap

Our current work is summarized in the roadmap for this quarter.