Code Lab: AngularDart Components

Send feedback

This code lab introduces you to a preview release of AngularDart Components, part of a large group of well-tested components that are widely used in Google’s Dart apps.

To complete this code lab, you need the following:

  • A Windows, Mac, or Linux computer with Dart SDK 1.20 (or a higher version)
  • A web connection and modern browser

This code lab assumes that you are familiar with Dart web app development. If you aren’t, instead try one of the other webdev code labs. Familiarity with AngularDart development isn’t required but is helpful, since this code lab doesn’t explain Angular concepts.

In this code lab, you’ll take a basic AngularDart app, called Lottery Simulator, and use AngularDart Components to simplify the code and beautify the UI. You can play with a live copy of the final app.

Here are screenshots of the app’s UI, before and after conversion to use AngularDart Components.

Base app Final app
HTML app AngularDart Components app

top-hatted guy from the cartoon that appears in the app's About tab

Contents

  • Step 1: Get to Know the Software
    • Get the app code
    • Get familiar with the base app
    • Get familiar with AngularDart Components
  • Step 2: Start Using AngularDart Components
    • Copy the source code
    • Depend on angular2_components
    • Set up the root component’s Dart file
    • Use <material-progress>
    • Use <glyph> in buttons
      • Common problem: Forgetting to import glyph fonts
    • Use <glyph> in other components
      • Common problem: Forgetting to register a component
    • Use <acx-scorecard>
      • Common problem: Registering the wrong component
  • Step 3: Upgrade Buttons and Inputs
    • Use <material-toggle>
    • Use <material-fab>
      • Common pattern: (trigger)
    • Use <material-checkbox>
    • Use <material-radio> and <material-radio-group>
  • Step 4: Add Expansion Panels and Tabs
    • Use <material-expansionpanel> and <material-expansionpanel-set>
    • Use <material-tab> and <material-tab-panel>
  • What Next?