Step 2: Start Using AngularDart Components 0.11


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 2-starteasy 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:

    {1-base → 2-starteasy}/pubspec.yaml
    @@ -7,6 +7,7 @@
    7
    7
    dependencies:
    8
    8
    angular: ^5.2.0
    9
    + angular_components: ^0.11.0
    9
    10
    intl: ^0.15.0
    10
    11
    dev_dependencies:
  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:

{1-base → 2-starteasy}/lib/lottery_simulator.dart
@@ -5,6 +5,7 @@
5
5
import 'dart:async';
6
6
import 'package:angular/angular.dart';
7
+ import 'package:angular_components/angular_components.dart';
7
8
import 'package:intl/intl.dart';
8
9
import 'src/help/help.dart';
@@ -24,12 +25,15 @@
24
25
templateUrl: 'lottery_simulator.html',
25
26
directives: [
26
27
HelpComponent,
28
+ MaterialIconComponent,
29
+ MaterialProgressComponent,
27
30
ScoresComponent,
28
31
SettingsComponent,
29
32
StatsComponent,
30
33
VisualizeWinningsComponent,
31
34
],
32
35
providers: [
36
+ materialProviders,
33
37
ClassProvider(Settings),
34
38
],
35
39
)

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:

{1-base → 2-starteasy}/lib/lottery_simulator.html
@@ -26,2 +26,2 @@
26
- Progress: <strong>{{progress}}%</strong> <br>
27
- <progress max="100" [value]="progress"></progress>
26
+ <material-progress [activeProgress]="progress" class="life-progress">
27
+ </material-progress>

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:

    {1-base → 2-starteasy}/web/index.html
    @@ -13,6 +13,8 @@
    13
    13
    }());
    14
    14
    </script>
    15
    15
    <script defer src="main.dart.js"></script>
    16
    + <link rel="stylesheet" type="text/css"
    17
    + href="https://fonts.googleapis.com/icon?family=Material+Icons">
    16
    18
    <style>
    17
    19
    #wrapper {
    18
    20
    max-width: 600px;
  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:

    {1-base → 2-starteasy}/lib/lottery_simulator.html
    @@ -31,5 +31,6 @@
    31
    31
    <button (click)="play()"
    32
    32
    [disabled]="endOfDays || inProgress"
    33
    33
    id="play-button"
    34
    - >Play
    34
    + aria-label="Play">
    35
    + <material-icon icon="play_arrow"></material-icon>
    35
    36
    </button>
  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.

{1-base → 2-starteasy}/lib/src/help/help.dart
@@ -3,12 +3,14 @@
3
3
// BSD-style license that can be found in the LICENSE file.
4
4
import 'package:angular/angular.dart';
5
+ import 'package:angular_components/angular_components.dart';
5
6
@Component(
6
7
selector: 'help-component',
7
8
templateUrl: 'help.html',
8
9
styleUrls: ['help.css'],
9
10
directives: [
11
+ MaterialIconComponent,
10
12
NgSwitch,
11
13
NgSwitchWhen,
12
14
NgSwitchDefault,

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:

    {1-base → 2-starteasy}/lib/src/scores/scores.dart
    @@ -3,11 +3,14 @@
    3
    3
    // BSD-style license that can be found in the LICENSE file.
    4
    4
    import 'package:angular/angular.dart';
    5
    + import 'package:angular_components/angular_components.dart';
    5
    6
    @Component(
    6
    7
    selector: 'scores-component',
    7
    8
    styleUrls: ['scores.css'],
    8
    9
    templateUrl: 'scores.html',
    10
    + directives: [ScorecardComponent],
    11
    + providers: [materialProviders],
    9
    12
    )
    10
    13
    class ScoresComponent {
    11
    14
    /// The state of cash the person would have if they saved instead of betting.
  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:

    {1-base → 2-starteasy}/lib/src/scores/scores.html
    @@ -1,15 +1,14 @@
    1
    - <div>
    2
    - <h4>Betting</h4>
    3
    - <p>
    4
    - <strong [class]="cash > altCash ? 'positive' : cash < altCash ? 'negative' : 'neutral'">${{ cash }}</strong>
    5
    - {{ outcomeDescription }}
    6
    - </p>
    7
    - </div>
    1
    + <acx-scorecard
    2
    + label="Betting"
    3
    + class="betting"
    4
    + value="${{ cash }}"
    5
    + description="{{ outcomeDescription }}"
    6
    + changeType="{{ cash > altCash ? 'positive' : cash < altCash ? 'negative' : 'neutral' }}">
    7
    + </acx-scorecard>
    8
    - <div>
    9
    - <h4>Investing</h4>
    10
    - <p>
    11
    - <strong>${{ altCash }}</strong>
    12
    - ...
    13
    - </p>
    8
    + <acx-scorecard
    9
    + label="Investing"
    10
    + class="investing"
    11
    + value="${{ altCash }}"
    12
    + description="...">
    13
    + </acx-scorecard>
    14
    - </div>
  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.

    {1-base → 2-starteasy}/lib/src/scores/scores.css
    @@ -1,7 +1,3 @@
    1
    - .positive {
    2
    - color: green;
    1
    + .investing {
    2
    + float: right;
    3
    - }
    4
    -
    5
    - .negative {
    6
    - color: red;
    7
    3
    }
  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.