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.

``bash


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.

`bash


To install latest

npm install angular-material-expander

To install latest and update package.json

npm install angular-material-expander --save
`

#### setup
install modules

`bash


install npm modules

npm install

install bower components

bower install
`

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

`javascript
// 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:

`bash


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

`html
md-expanded="vm.open" // optional
width="300px" // optional
height="200px" // optional
>



content

`

Documentation

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

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


* mdExpander
* mdExpanderHeader
* mdExpanderExpanded
* mdExpanderArrow
* $mdExpander service




mdExpander


`html
[md-expanded=""]
[width=""]
[height=""]
>
...

`

#### 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.
`html
>
...

`

mdExpanderExpanded

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

...

...

`

mdExpanderArrow

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



...



...


`

$3

$mdExpander Service

Show and Hide expanders using their md-component-id.
`javascript
// sync
$mdExpander('theComponentId').show();
$mdExpander('theComponentId').hide();
$mdExpander('theComponentId').isOpen();

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

#### Methods

$3

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

|

$3

Show content inside of the md-expander-expanded element
`javascript
// sync
$mdExpander('theComponentId').show();

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

$3


Hide content inside of the md-expander-expanded element
`javascript
// sync
$mdExpander('theComponentId').hide();

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

$3


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

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

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