angulardart.xyz

Search

Docs

Components

Resources

Reference

On this page

Step 2: Start Using AngularDart Components 1.0

In this step, you’ll change the app to use a few of the AngularDart Components:

  • <material-icon>
  • <material-progress>
  • <acx-scorecard>

Run the live example (view source) of the `` version of the app.

Copy the source code

Make a copy of the base app’s source code:

> cp -r 1-base myapp
> cd myapp
> pub get

From now on, you’ll work in this copy of the source code, using whatever Dart web development tools you prefer.

Depend on angular_components

  1. Edit pubspec.yaml to add a dependency to angular_components:

  2. Get the new package:

    > pub get

Set up the root component’s Dart file

Edit lib/lottery_simulator.dart, importing the Angular components and informing Angular about materialProviders and the material directives used in the template:

Now you’re ready to use the components.

Use material-progress

Edit the template file lib/lottery_simulator.html to use the <material-progress> tag (MaterialProgressComponent). The diffs should look similar to this:

Run the app, and you’ll see the new progress bar stretching across the window:

screenshot showing the material progress bar

As a reminder, here’s what the progress section looked like before:

screenshot showing the HTML progress bar

That change is barely noticeable. You can make a bigger difference by adding images to the buttons, using the <material-icon> component.

Use material-icon in buttons

Using <material-icon> (MaterialIconComponent) is similar to using <material-progress>, except that you also need material icon fonts. You can find icons and instructions for including them at design.google.com/icons. Use the following icons in the main simulator UI:

Current button text New icon Icon name
Play play arrow
Step skip next
Pause pause
Reset replay

  1. Find the icon font value for play arrow:

    1. Go to design.google.com/icons.
    2. Enter play or play arrow in the site search box.
    3. In the results, click the play arrow icon |> to get more information.
    4. Click ICON FONT to get the icon code to use: play_arrow.

  2. Find the icon font values for skip next, pause, and replay.

  3. Edit the main HTML file (web/index.html) to add the following code to the <head> section:

  4. Edit lib/lottery_simulator.html to change the first button to use a <material-icon> instead of text:

    1. Add an aria-label attribute to the button, giving it the value of the button’s text (Play).
    2. Replace the button’s text (Play) with a <material-icon> element.
    3. Set the icon attribute to the icon code (play_arrow).

    Here are the diffs:

  5. Use similar changes to convert the Step, Pause, and Reset buttons to use material icons instead of text.

These small changes make a big difference in the UI:

buttons have images now, instead of text

Use material-icon in other components

If you scroll down to the Tips section of the page, you’ll see blank spaces where there should be icons:

help text has no images

The HTML template (lib/src/help/help.html) uses <material-icon> already, so why isn’t it working?

Edit lib/src/help/help.dart to import the AngularDart Components and register MaterialIconComponent.

Adding those two lines to lib/src/help/help.dart makes the material icons display:

help text now has images

Use acx-scorecard

Make one more change: use <acx-scorecard> (ScorecardComponent) to display the betting and investing results. You’ll use the scorecards in the app’s custom ScoresComponent (<scores-component>), which is implemented in lib/src/scores/scores.*.

  1. Edit lib/src/scores/scores.dart to register ScorecardComponent and the materialProviders provider:

  2. Edit lib/src/scores/scores.html (the template file for ScoresComponent) to change the Betting section from a <div> to an <acx-scorecard>. Specify the following attributes (documented in the ScorecardComponent API reference) for each <acx-scoreboard>:

    • label: Set this to the string in the div’s <h4> heading: “Betting”.
    • class: Set this to “betting”, so that you can use it to specify custom styles.
    • value: Set this to the value of the cash property of ScoresComponent.
    • description: Set this to the second line of content in the div’s <p> section.
    • changeType: Set this to the value that [class] is set to, surrounded by {{ }}.

  3. Similarly, change the Investing section from a <div> to an <acx-scorecard>. A few notes:

    • label: Set this to “Investing”.
    • class: Set this to “investing”.
    • value: Set this to the value of the altCash property of ScoresComponent.
    • description: As before, set this to the second line of content in the div’s <p> section.
    • Don’t specify a changeType attribute.

    Here are the code diffs for the last two steps:

  4. Edit lib/src/scores/scores.css (styles for ScoresComponent) to specify that .investing floats to the right. You can also remove the unneeded .positive and .negative styles.

  5. Refresh the app, and look at the nice new UI:

    new UI of the lottery simulation, with "Betting" and "Investing" scorecards

    Remember, it used to look like this:

    old UI of the lottery simulation

Problems?

Check your code against the solution in the 2-starteasy directory.