Search

#### Docs

- Guide
  - Overview
  - Setup
  - Learning Angular
  - Architecture
  - Displaying Data
  - User Input
  - Forms
  - Dependency Injection
  - Template Syntax
- Tutorial
  - Introduction
  - 0. The Starter App
  - 1. The Hero Editor
  - 2. Master/Detail
  - 3. Multiple Components
  - 4. Services
  - 5. Routing
  - 6. HTTP
- Advanced
  - Attribute Directives
  - Component Styles
  - Deployment
  - Hierarchical Injectors
  - HTTP Client
  - Lifecycle Hooks
  - Pipes
  - Router
  - Security
  - Structural Directives
  - Testing

#### Components

- Components Gallery

#### Resources

- Cheat Sheet
- Glossary
- FAQ
- Tools
- Community and Support

#### Reference

- Videos
- API Documentation

new_releases We're currently in the progress of migrating this site from Angular version 5.3.1 to 7.0.0. Package versions might be out-of-date or inconsistent! Visit the repo for more info.

# Step 4: Add Expansion Panels and Tabs 1.0

<?code-excerpt path-base=”examples/acx/lottery”?>

In this final step, you’ll use expansion panels and tabs to hide information until the user needs it. You’ll use these components:

- `<material-expansionpanel>` and `<material-expansionpanel-set>`
- `<material-tab>` and `<material-tab-panel>`

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

## Use material-expansionpanel and material-expansionpanel-set

Expansion panels are especially good for settings, so use them in the custom `<settings-component>`, implemented in lib/src/settings/settings_component.* files.

1. Edit the Dart file (`lib/src/settings/settings_component.dart`), adding the expansion panel directives MaterialExpansionPanel and MaterialExpansionPanelSet:

   <?code-excerpt “3-usebuttons/lib/src/settings/settings_component.dart” diff-with=”4-final/lib/src/settings/settings_component.dart”?>

       --- 3-usebuttons/lib/src/settings/settings_component.dart
       +++ 4-final/lib/src/settings/settings_component.dart
       @@ -15,6 +15,8 @@
          templateUrl: 'settings_component.html',
          directives: [
            MaterialCheckboxComponent,
       +    MaterialExpansionPanel,
       +    MaterialExpansionPanelSet,
            MaterialRadioComponent,
            MaterialRadioGroupComponent,
            NgFor

2. Edit the template file (`lib/src/settings/settings_component.html`) to change the enclosing `<div>` element (the first and last lines of the file) to be a `<material-expansionpanel-set>`.

3. Convert the Wallet div into a `<material-expansionpanel>` (MaterialExpansionPanel):

   1. Change the `<div>` element to `<material-expansionpanel>`.
   2. Move the title (`h2` content) and summary content (`p` content) into the `<material-expansionpanel>` `name` and `secondaryText` attributes, respectively.
   3. Remove the buttons from the bottom of the panel, putting their event handling code into `(save)` and `(cancel)` bindings. Your code changes to the beginning of this file should look like this:

   <?code-excerpt “3-usebuttons/lib/src/settings/settings_component.html” diff-with=”4-final/lib/src/settings/settings_component.html” to=”betting-panel”?>

       --- 3-usebuttons/lib/src/settings/settings_component.html
       +++ 4-final/lib/src/settings/settings_component.html
       @@ -1,7 +1,9 @@
       -<div>
       -  <div>
       -    <h2>Wallet</h2>
       -    <p>Initial: ${{ settings.initialCash }}. Daily disposable income: ${{ settings.dailyDisposable }}.</p>
       +<material-expansionpanel-set>
       +  <material-expansionpanel
       +      name="Wallet"
       +      secondaryText="Initial: ${{ settings.initialCash }}. Daily disposable income: ${{ settings.dailyDisposable }}."
       +      (save)="settingsUpdated()"
       +      (cancel)="resetWallet()">
            <div>
              <h3>Initial cash</h3>
              <material-radio-group>
       @@ -21,7 +23,3 @@
                </material-radio>
              </material-radio-group>
            </div>
       -    <button (click)="settingsUpdated()">Save</button>
       -    <button (click)="resetWallet()">Cancel</button>
       -  </div>
       -  <div class="betting-panel">

4. Test the app. The Wallet settings should look like this at first:

   When you expand the Wallet settings, they should look like this:

   When you change settings and click the SAVE button at bottom right, the new values should appear in the UI:

5. Once the app runs correctly, convert the two remaining major divs (Betting and Other) into material expansion panels.

That bit of work saved a lot of UI space:

## Use material-tab and material-tab-panel

You can save more by moving auxiliary text into separate tabs. This affects the main UI, implemented in `lib/lottery_simulator.*` files.

1. Make the following changes to `lib/lottery_simulator.dart`:

   <?code-excerpt “3-usebuttons/lib/lottery_simulator.dart” diff-with=”4-final/lib/lottery_simulator.dart”?>

       --- 3-usebuttons/lib/lottery_simulator.dart
       +++ 4-final/lib/lottery_simulator.dart
       @@ -28,6 +28,8 @@
            MaterialFabComponent,
            MaterialIconComponent,
            MaterialProgressComponent,
       +    MaterialTabComponent,
       +    MaterialTabPanelComponent,
            MaterialToggleComponent,
            ScoresComponent,
            SettingsComponent,

2. Edit `lib/lottery_simulator.html`:

   1. After the end of the first `<div>`, add a `<material-tab-panel>` tag.

   2. Put the closing tag of the `<material-tab-panel>` at the end of the file.

   3. Just after the opening `<material-tab-panel>` tag, add a `<material-tab>` tag with the label set to “Simulation”.

   4. Close the `<material-tab-panel>` near the bottom of the file, just before the `<div>` containing the Help heading.

      Your changes, so far, should look like this:

          <h1>Lottery Simulator</h1>

          <div class="help">
            ...
          </div>

          <material-tab-panel>
            <material-tab label="Simulation">
              ...
            </material-tab>
          <div>
            <h2>Help`</h2>`
            ...
          </div>
          </material-tab-panel>

      If you run the app now, the top of the UI should look like this:

   5. Change the next two `<div>`-`<h2>` combinations into `<material-tabs>`, with the labels “Help” and “About”.

The end of the file should look like this:

<?code-excerpt “3-usebuttons/lib/lottery_simulator.html” diff-with=”4-final/lib/lottery_simulator.html” from=”\/material-tab” to=”\/material-tab-panel”?>

    --- 3-usebuttons/lib/lottery_simulator.html
    +++ 4-final/lib/lottery_simulator.html
    @@ -85 +78,7 @@
    +  </material-tab>
    +  <material-tab label="Help">
    +    <help-component content="help"></help-component>
    +  </material-tab>
    +  <material-tab label="About">
    +    <help-component content="about"></help-component>
    +  </material-tab>
    +</material-tab-panel>

Your app should now look exactly like the one you saw in the first page of this codelab.

Congratulations! You’ve converted a functional but UI-challenged app into a good looking, well-behaved app that uses the next generation of AngularDart Components.

### Problems?

Check your code against the solution in the 4-final directory.