ng2-native-accordion

###Angular2 accordion - no dependencies

Index:

• Getting Started
• Components:
  • Accordion
• Modify and build

Getting Started

1. Download the library using npm npm install --save ng2-native-accordion

2. Register the library in your module

   import {NgModule} from '@angular/core';
   import {BrowserModule} from '@angular/platform-browser';
   import {Ng2Accordion} from 'ng2-native-accordion';
   
   @NgModule({
   	declarations: [...],
   	imports: [
   		BrowserModule,
   		Ng2Accordion
   	],
   	bootstrap: [...]
   })
   export class AppModule {
   }
   

   If you're using systemJS, you have to reference the umd version of the lib in your config.

   	System.config({
   		map: { 
   			...,
   			'ng2-native-accordion': 'node_modules/ng2-native-accordion'
   		},
   		packages: {
   			...,
   			'ng2-native-accordion': {main: 'bundles/core.umd.js', defaultExtension: 'js'}
   		}
   	});

3. Use the accordion component in your application

   import {Component} from '@angular/core';
   
   @Component({
   	selector: 'foo',
   	template: `
   		<h2 (click)="accordionDom.toggle()">Basic usage</h2>
   		<accordion #accordionDom>
   			<section>random content</section>
   		</accordion>
   	`
   })
   export class FooComponent {}

   import {Component} from '@angular/core';
   
   @Component({
   	selector: 'foo',
   	template: `
   		<h2 (click)="toggle()">Basic usage</h2>
   		<accordion [collapse]="isVisible">
   			<section>random content</section>
   		</accordion>
   	`
   })
   export class FooComponent {
      	
   	isVisible:boolean = true;
   	toggle() {
   		this.isVisible = !this.isVisible;
   	}
      	
   }

Components

###Accordion

Inputs:

• collapse: boolean. state.
• duration: Serializable. transition duration (ms).

Outputs:

• stateChange: callback.

Exposed methods:

• toggle: Function. toggle the given accordion.

Usage:

	import {Component} from '@angular/core';
	
	@Component({
		selector: 'foobar',
		template: `
			<button (click)="toggle()">collapse</button>
			<accordion [collapse]="collapsed" (stateChange)="log($event)">
				<section>content..</section>
			</accordion>
		`
	})
	export class FooBar {
		collapsed:boolean = true;
		log(value) {
			console.log('new state', value);
		}
		toggle() {
			this.collapsed = !this.collapsed;
		}
	}

	import {Component} from '@angular/core';
	
	@Component({
		selector: 'foobar',
		template: `
			<h2 (click)="flag.toggle()">Custom duration</h2>
			<accordion [duration]="duration" #flag>
				<section>
					<input type="text" [(ngModel)]="duration">
				</section>
			</accordion>
		`
	})
	export class FooBar {
		duration:number = 300;
	}

Modify and build

npm install

Start the build process: npm run build

Start the dev server: npm run dev then go to http://localhost:8080/webpack-dev-server/index.html