angular-material-expander

Expanding component that follows material design spec and is built to be used with Angular Material

Quick Links:

• Installation
• Building
• Usage
• Documentation
• FAQ

Installation

Bower

Change to your project's root directory.

# To install latest
bower install angular-material-expander

# To install latest and update bower.json
bower install angular-material-expander --save

Npm

Change to your project's root directory.

# To install latest
npm install angular-material-expander

# To install latest and update package.json
npm install angular-material-expander --save

setup

install modules

# install npm modules
npm install

# install bower components
bower install

Include the material.components.expander module as a dependency in your application.

// with ngMaterial
angular.module('myApp', ['ngMaterial', 'material.components.expander']);

Building

You can easily build using gulp.

The built files will be created in the dist folder

Run the gulp tasks:

# To run test app locally. This will kick of the watch process
# navigate to `localhost:8080`
gulp

# To build the js and css files to the `/build` directory
gulp build

Usage

Example

<md-exapnder
  md-expanded="vm.open" // optional
  width="300px" // optional
  height="200px" // optional
>
  <md-exapnder-header>
    <div class="md-title">header</div>
    <md-expander-arrow></md-expander-arrow>
  </md-exapnder-header>

  <md-expander-expanded>
    <!-- add content without padding -->
    <div class="md-expander-content">
      <p>content</p>
    </div>
  </md-expander-expanded>
</md-exapnder>

Documentation

To add Expanders to you angular-material project, include the material.components.expander module as a dependency in your application.

angular.module('myApp', ['ngMaterial', 'material.components.expander']);

• mdExpander
• mdExpanderHeader
• mdExpanderExpanded
• mdExpanderArrow
• $mdExpander service

mdExpander

<md-exapnder
  [md-expanded=""]
  [width=""]
  [height=""]
>
...
</md-exapnder>

Attributes

| Param | Type | Details | | :--: | :--: | :--: | | md-expanded | boolean? | Optional boolean to control the panel with | | height | number? | set height in pixels. If not set the the expander will open to the contents height | | width | number? | set width in pixels. If not set then the expander will fill the area |

mdExpanderHeader

This is an optional element.

<md-exapnder-header
>
...
</md-exapnder-header>

mdExpanderExpanded

You can add a div with the class name md-expander-content to get the default padding

<md-exapnder-expanded
>
  <div class="md-expander-content">
    ...
  </div>
...
</md-exapnder-expanded>

mdExpanderArrow

This is an optional element. that can be added as the first or last element in the md-expander-header

<!-- First -->
<md-exapnder-header>
  <md-exapnder-arrow></md-exapnder-arrow>
  ...
</md-exapnder-header>

<!-- Last -->
<md-exapnder-header>
  ...
  <md-exapnder-arrow></md-exapnder-arrow>
</md-exapnder-header>

Service

$mdExpander Service

Show and Hide expanders using their md-component-id.

// sync
$mdExpander('theComponentId').show();
$mdExpander('theComponentId').hide();
$mdExpander('theComponentId').isOpen();

// Async
$mdExpander().waitFor('theComponentId').then(function (instance) {
  instance.show();
  instance.hide();
  instance.isOpen();
});

Methods

$mdExpander

Get an instance of the expander by its component id You can use this in 2 ways

• 1. pass in a string id and get back the instance
• 2. call the service and get a service with 2 methods. Find witch will do the same as 1. waitFor that will return a promise, so you can call on directives before they are added to the dom.

Parameters

| Param | Type | Details | | :--: | :--: | :--: | | componentId | string= | the component id used on the element |

Returns

| Param | Details | | :--: | :--: | | promise/instance | returns a instance or a service with 2 methods |

Returned Service

| Method | Details | | :--: | :--: | | find | sync method for getting instance | | waitFor | async method for getting instance. this returnes a promise |

$mdExpander#show

Show content inside of the md-expander-expanded element

// sync
$mdExpander('theComponentId').show();

// Async
$mdExpander().waitFor('theComponentId').then(function (instance) {
  instance.show();
});

$mdExpander#hide

Hide content inside of the md-expander-expanded element

// sync
$mdExpander('theComponentId').hide();

// Async
$mdExpander().waitFor('theComponentId').then(function (instance) {
  instance.hide();
});

$mdExpander#isOpen

Returns true if expander is open. Returns false if expander is hidden

// sync
$mdExpander('theComponentId').isOpen();

// Async
$mdExpander().waitFor('theComponentId').then(function (instance) {
  instance.isOpen();
});