https://github.com/gbuomprisco/ng2-expansion-panels
Expansion Panels component for Angular 2
https://github.com/gbuomprisco/ng2-expansion-panels
angular angular-components expansion-panels material-design
Last synced: 10 months ago
JSON representation
Expansion Panels component for Angular 2
- Host: GitHub
- URL: https://github.com/gbuomprisco/ng2-expansion-panels
- Owner: Gbuomprisco
- Created: 2016-10-03T17:27:50.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-21T16:55:26.000Z (about 9 years ago)
- Last Synced: 2025-08-09T12:03:47.744Z (10 months ago)
- Topics: angular, angular-components, expansion-panels, material-design
- Language: JavaScript
- Homepage:
- Size: 23.4 KB
- Stars: 18
- Watchers: 2
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ng2 Expansion Panels [](https://travis-ci.org/Gbuomprisco/ng2-expansion-panels)
This is a component for Angular 2. Design is inspired by Material Design's component Expansion Panels.
**Development is in very early stage**
## Demo
Check out the live demo (with source code) here [http://www.buompris.co/ng2-expansion-panels](http://www.buompris.co/ng2-expansion-panels).
## Installing
npm install ng2-expansion-panels --save
## Configuration
Ensure you import the module:
```javascript
import { ExpansionPanelsModule } from 'ng2-expansion-panels';
// please notice this is the new way of telling a Component
// to import another component...no more directives[]
@NgModule({
imports: [ExpansionPanelsModule]
})
export class MyModule {}
```
## API
- **`onOpen`** - [**`?onOpen(panel: ExpansionPanelComponent)`**] - event fired when a panel is opened
- **`onClose`** - [**`?onClose(panel: ExpansionPanelComponent)`**] - event fired when a panel is closed
- **`onSubmit`** - [**`?onSubmit()`**] - event fired when `submit` is called
- **`onCancel`** - [**`?onCancel()`**] - event fired when `cancel` is called
## Examples
### Basic Example
```html
Title
Description when hidden
Description when toggled
Content
...
...
...
```
### Add Buttons to a panel
Every panel has already defined two methods, `cancel` and `submit`. In order to bind those
to the buttons we define, we need to create a reference to the panel. In this example, I called it `#panel`
and them I'm calling panel.cancel() and panel.submit().
It is possible to listen to these events with the outputs `onCancel` and `onSubmit`.
```html
Title
Description when hidden
Description when toggled
Content
Cancel
Submit
```