docs(collapse): decompose Basic demo

demo/src/app/components/+collapse/collapse-section.list.ts

@@ -1,5 +1,6 @@
 import { CollapseDemoComponent } from './demos/basic/basic';
 import { ToggleManualDemoComponent } from './demos/toggle-manual/toggle-manual';
+import { CollapseDemoEventsComponent } from './demos/events/events';
 
 import { ContentSection } from '../../docs/models/content-section.model';
 import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
@@ -29,6 +30,15 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
         outlet: CollapseDemoComponent
       },
+      {
+        title: 'Events',
+        anchor: 'events',
+        component: require('!!raw-loader?lang=typescript!./demos/events/events'),
+        html: require('!!raw-loader?lang=markup!./demos/events/events.html'),
+        description: `Collapse directive exposes 2 events: <code>collapsed</code>, that fires when a content was hidden, 
+                      and <code>expanded</code>, that fires when a content was shown`,
+        outlet: CollapseDemoEventsComponent
+      },
       {
         title: 'Manual toggle',
         anchor: 'manual-toggle',

demo/src/app/components/+collapse/demos/basic/basic.html

@@ -2,9 +2,6 @@
         (click)="isCollapsed = !isCollapsed">Toggle collapse
 </button>
 <hr>
-<div (collapsed)="collapsed($event)"
-     (expanded)="expanded($event)"
-     [collapse]="isCollapsed"
-     class="card card-block card-header">
+<div [collapse]="isCollapsed" class="card card-block card-header">
   <div class="well well-lg">Some content</div>
 </div>

demo/src/app/components/+collapse/demos/basic/basic.ts

@@ -6,12 +6,4 @@ import { Component } from '@angular/core';
 })
 export class CollapseDemoComponent {
   isCollapsed: boolean = false;
-
-  collapsed(event: any): void {
-    console.log(event);
-  }
-
-  expanded(event: any): void {
-    console.log(event);
-  }
 }

demo/src/app/components/+collapse/demos/events/events.html

@@ -0,0 +1,17 @@
+<div class="row">
+  <div class="col-md-3">
+    <button type="button" class="btn btn-primary"
+            (click)="isCollapsed = !isCollapsed">Toggle collapse
+    </button>
+  </div>
+  <div class="col-md-9">
+    <pre class="card card-block card-header">Event: {{message}}</pre>
+  </div>
+</div>
+<hr>
+<div (collapsed)="collapsed()"
+     (expanded)="expanded()"
+     [collapse]="isCollapsed"
+     class="card card-block card-header">
+  <div class="well well-lg">Some content</div>
+</div>

demo/src/app/components/+collapse/demos/events/events.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'collapse-demo-events',
+  templateUrl: './events.html'
+})
+export class CollapseDemoEventsComponent {
+  isCollapsed = false;
+  message: string;
+
+  collapsed(): void {
+    this.message = 'collapsed';
+  }
+
+  expanded(): void {
+    this.message = 'expanded';
+  }
+}

demo/src/app/components/+collapse/demos/index.ts

@@ -1,7 +1,9 @@
 import { CollapseDemoComponent } from './basic/basic';
 import { ToggleManualDemoComponent } from './toggle-manual/toggle-manual';
+import { CollapseDemoEventsComponent } from './events/events';
 
 export const DEMO_COMPONENTS = [
   CollapseDemoComponent,
+  CollapseDemoEventsComponent,
   ToggleManualDemoComponent
 ];