![\"Angular](\"https://cloud.githubusercontent.com/assets/11681147/16354667/4d9afefe-3a61-11e6-91a6-8f5addc40d0c.gif\")
\n\nPut content in here
\nadd an id if you want to acces the panel via the $mdExpansionPanelGroup service
panels expand when added to
allows for more than one panel to be expanded at a time
|\n\n\n\n## mdExpansionPanel\n\n`mdExpansionPanel` is the main container for panels\n\n```\nadd an id if you want to acces the panel via the $mdExpansionPanel service
add this attribute set the max height of the expanded content. The container will be set to scroll
|\n\n\n\n\n\n## mdExpansionPanelHeader\n\n`mdExpansionPanelHeader` is nested inside of `mdExpansionPanelExpanded` and contains content you want in place of the collapsed content\nthis is optional\n\n```\nadd this aatribute to disable sticky
|\n\n\n\n\n## mdExpansionPanelFooter\n\n`mdExpansionPanelFooter` is nested inside of `mdExpansionPanelExpanded` and contains content you want at the bottom.\nBy default the Footer will stick to the bottom of the page if the panel expands past\nthis is optional\n\n```\nadd this aatribute to disable sticky
|\n\n\n\n## mdExpansionPanelIcon\n\n`mdExpansionPanelIcon` can be used in both `md-expansion-panel-collapsed` and `md-expansion-panel-header` as the first or last element. Adding this will provide a animated arrow for expanded and collapsed states\n\n```\nthe component id used on the element
|\n\n**Returns**\n\n| Param | Details |\n| :--: | :--: |\n| promise/instance |returns a instance or a service with 2 methods
|\n\n\n**Returned Service**\n\n| Method | Details |\n| :--: | :--: |\n| find |sync method for getting instance
|\n| waitFor |async method for getting instance. this returnes a promise
|\n\n\n### $mdExpansionPanel#expand\n\nExapnd Panel\n\n**Parameters**\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| options | object= |object with options
|\n| options#animation | boolean= |set to false if you want no animations
|\n\n**Returns**\n\n| Param | Details |\n| :--: | :--: |\n| promise |a promise that will resolve when panel is done animating
|\n\n\n### $mdExpansionPanel#collapse\n\nCollapse Panel\n\n**Parameters**\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| options | object= |object with options
|\n| options#animation | boolean= |set to false if you want no animations
|\n\n**Returns**\n\n| Param | Details |\n| :--: | :--: |\n| promise |a promise that will resolve when panel is done animating
|\n\n\n### $mdExpansionPanel#remove\n\nRemove panel from document\n\n**Parameters**\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| options | object= |object with options
|\n| options#animation | boolean= |set to false if you want no animations
|\n\n**Returns**\n\n| Type | Details |\n| :--: | :--: |\n| promise |a promise that will resolve when panel is done animating
|\n\n\n### $mdExpansionPanel#onRemove\n\nCallback for panel when removed from dom\n\n**Parameters**\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| callback | function |function called when panel is removed from dom
|\n\n\n### $mdExpansionPanel#addClickCatcher\n\nAdd a click catcher that will call a given function when the page surrounding the panel is clicked\n\n**Parameters**\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| callback | function |function called on click
|\n\n\n### $mdExpansionPanel#removeClickCatcher\n\nRemove current click catcher\n\n\n### $mdExpansionPanel#isOpen\n\nReturns boolean\n\n**Returns**\n\n| Type | Details |\n| :--: | :--: |\n| boolean |true if panel is expanded false if panel is collapsed
|\n\n\n\n\n\n\n## $mdExpansionPanelGroup\n\nControl expansion panels and allow for adding and registering panels from code\n\n```javascript\n// sync\n$mdExpansionPanelGroup('theComponentId').register('name', {\n templateUrl: 'template.html',\n controller: 'Controller'\n});\n$mdExpansionPanelGroup('theComponentId').add({\n templateUrl: 'template.html',\n controller: 'Controller'\n}).then(function (panelCtrl) {\n panelCtrl.expand();\n});\n$mdExpansionPanelGroup('theComponentId').remove('name');\n$mdExpansionPanelGroup('theComponentId').removeAll();\n$mdExpansionPanelGroup('theComponentId').collapseAll();\n$mdExpansionPanelGroup('theComponentId').getAll();\n$mdExpansionPanelGroup('theComponentId').getOpen();\n$mdExpansionPanelGroup('theComponentId').count();\nvar killOnChange = $mdExpansionPanelGroup('theComponentId').onChange(function (count) {});\n\n\n// async\n$mdExpansionPanelGroup().waitFor('theComponentId').then(function (instance) {\n instance.register('name', {\n templateUrl: 'template.html',\n controller: 'Controller'\n });\n\n instance.add({\n templateUrl: 'template.html',\n controller: 'Controller'\n }).then(function (panelCtrl) {\n panelCtrl.expand();\n });\n\n instance.add('name', {locals: 'data'});\n instance.remove('name');\n instance.removeAll({animation: false});\n instance.count();\n instance.collapseAll();\n instance.getAll();\n instance.getOpen();\n var killOnChange = instance.onChange(function (count) {});\n});\n```\n\n\n\n#### Methods\n\n### $mdExpansionPanelGroup\n\nGet an instance of the expansion panel group by its component id.\nYou can use this in 2 ways\n\n- 1. pass in a string id and get back the instance\n- 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.\n\n**Parameters**\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| componentId | string= |the component id used on the element
|\n\n**Returns**\n\n| Param | Details |\n| :--: | :--: |\n| promise/instance |returns a instance or a service with 2 methods
|\n\n\n**Returned Service**\n\n| Method | Details |\n| :--: | :--: |\n| find |sync method for getting instance
|\n| waitFor |async method for getting instance. this returnes a promise
|\n\n\n### $mdExpansionPanelGroup#register\n\nregister panel that can be added by the given name\n\n**Parameters**\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| name | string |the name you can use to add the template
|\n| options.template | string= |template string
|\n| options.templateUrl | string= |template url
|\n| options.controller | string= |controller string or function
|\n| options.controllerAs | string= |controller as name
|\n| options.locals | object= |locals for injection
|\n\n\n### $mdExpansionPanelGroup#add\n\nadd a panel by either passing in a registered name or object. You can also pass in locals\n\n**Parameters**\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| options | string/object |registered panel name or object with details
|\n| locals | object= |object of locals to inject intp controller
|\n\n**Options Object**\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| options.template | string= |template string
|\n| options.templateUrl | string= |template url
|\n| options.controller | string= |controller string or function
|\n| options.controllerAs | string= |controller as name
|\n| options.locals | object= |locals for injection
|\n\n**Returns**\n\n| Param | Details |\n| :--: | :--: |\n| promise |a promise that will return the panel instance
|\n\n\n### $mdExpansionPanelGroup#remove\n\nRemove a panel form the group\n\n**Parameters**\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| componentId | string |component id on panel
|\n| options | object= |object with options
|\n| options#animation | boolean= |set to false if you want no animations
|\n\n**Returns**\n\n| Type | Details |\n| :--: | :--: |\n| promise |a promise that will resolve when panel is done animating
|\n\n\n### $mdExpansionPanelGroup#removeAll\n\nRemove all panels form the group\n\n**Parameters**\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| options | object= |object with options
|\n| options#animation | boolean= |set to false if you want no animations
|\n\n\n### $mdExpansionPanelGroup#count\n\nReturn number of panels\n\n**Returns**\n\n| Type | Details |\n| :--: | :--: |\n| number |number of panels in dom
|\n\n\n\n### $mdExpansionPanelGroup#onChange\n\nA function that is called whenever a panel is added or removed from dom. This will return the panel count\n\n**Parameters**\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| callback | function | |\n\n**Returns**\n\n| Type | Details |\n| :--: | :--: |\n| function |a function you can call to stop listening
|\n\n\n### $mdExpansionPanelGroup#getAll\n\nReturns all panel instances from group\n\n### $mdExpansionPanelGroup#getOpen\n\nReturns all open panel instances from group\n\n\n### $mdExpansionPanelGroup#collapseAll\n\nCollapse all panels in group\n\n**Parameters**\n\n| Param | Type | Details |\n| :--: | :--: | :--: |\n| noAnimation | boolean=false |set to true if you want no animations
|\n","maintainers":[{"name":"b-3po","email":"ben@benjaminrubin.com"}],"time":{"modified":"2022-06-13T02:55:16.106Z","created":"2016-06-25T19:46:58.938Z","0.0.0":"2016-06-25T19:46:58.938Z","0.1.1-0":"2016-06-25T20:53:08.035Z","0.2.0":"2016-07-01T05:18:34.980Z","0.3.0":"2016-07-02T05:41:16.936Z","0.4.0":"2016-07-03T03:05:23.904Z","0.4.1":"2016-07-05T23:33:29.749Z","0.4.2":"2016-07-06T01:16:15.596Z","0.4.3":"2016-07-06T01:19:24.188Z","0.4.4":"2016-07-06T02:23:20.235Z","0.4.5":"2016-07-09T04:36:37.750Z","0.4.6":"2016-07-15T05:04:48.324Z","0.4.7":"2016-07-15T05:23:57.086Z","0.4.8":"2016-07-19T02:40:10.885Z","0.5.0":"2016-07-20T03:01:13.370Z","0.6.0":"2016-08-06T05:20:29.310Z","0.6.1":"2016-08-09T04:16:51.423Z","0.6.2":"2016-10-04T03:07:28.578Z","0.7.0":"2016-10-25T04:59:02.627Z","0.7.1":"2016-12-06T01:50:54.483Z","0.7.2":"2017-02-07T03:50:13.521Z"},"homepage":"https://github.com/B-3PO/angular-material-expansion-panel#readme","keywords":["material","material-design","design","angular","component","expansion","panel","panels"],"repository":{"type":"git","url":"git://github.com/B-3PO/angular-material-expansion-panel.git"},"author":{"name":"Ben Rubin"},"bugs":{"url":"https://github.com/B-3PO/angular-material-expansion-panel/issues"},"license":"MIT","readmeFilename":"README.md","users":{"mihowguitar":true}}