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: about 2 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 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-21T16:55:26.000Z (over 7 years ago)
• Last Synced: 2024-12-14T12:47:39.948Z (about 2 months ago)
• Topics: angular, angular-components, expansion-panels, material-design
• Language: JavaScript
• Homepage:
• Size: 23.4 KB
• Stars: 18
• Watchers: 3
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ng2 Expansion Panels [![Build Status](https://travis-ci.org/Gbuomprisco/ng2-expansion-panels.svg?branch=master)](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

        

    

```