Merge 6a4ada2 into 2c671b6

apps/ngx-bootstrap-docs/src/app/components/+collapse/demos/inline-display/inline-display.html

@@ -1,10 +1,10 @@
-<button type="button" class="btn btn-success" (click)="collapse.display='inline-block'"
+<button type="button" class="btn btn-success" (click)="isCollapsed = false"
         aria-controls="collapseBasic">Inline-block
 </button>
-<button type="button" class="btn btn-primary" (click)="collapse.display='none'"
+<button type="button" class="btn btn-primary" (click)="isCollapsed = true"
         aria-controls="collapseBasic">None
 </button>
 <hr>
-<div id="collapseBasic" [collapse]="!isCollapsed" #collapse="bs-collapse">
+<div id="collapseBasic" [collapse]="isCollapsed" [display]="'inline-block'">
   <div class="well well-lg card card-block card-header">Some content</div>
 </div>

src/collapse/collapse.directive.ts

@@ -11,8 +11,10 @@ import {
   EventEmitter,
   HostBinding,
   Input,
+  OnChanges,
   Output,
-  Renderer2
+  Renderer2,
+  SimpleChanges
 } from '@angular/core';
 
 import {
@@ -28,7 +30,7 @@ import {
     '[class.collapse]': 'true'
   }
 })
-export class CollapseDirective implements AfterViewChecked {
+export class CollapseDirective implements OnChanges, AfterViewChecked {
   /** This event fires as soon as content collapses */
   @Output() collapsed: EventEmitter<CollapseDirective> = new EventEmitter();
   /** This event fires when collapsing is started */
@@ -50,41 +52,20 @@ export class CollapseDirective implements AfterViewChecked {
   // animation state
   @HostBinding('class.collapsing') isCollapsing = false;
 
-  @Input()
-  set display(value: string) {
-    if (!this.isAnimated) {
-      this._renderer.setStyle(this._el.nativeElement, 'display', value);
-
-      return;
-    }
-
-    this._display = value;
-
-    if (value === 'none') {
-      this.hide();
-
-      return;
-    }
-
-    this.show();
-  }
+  /** display value used when collapse is visible */
+  @Input() display = 'block';
   /** turn on/off animation */
   @Input() isAnimated = false;
   /** A flag indicating visibility of content (shown or hidden) */
   @Input()
   set collapse(value: boolean) {
     this.collapseNewValue = value;
-    if (!this._player || this._isAnimationDone) {
-      this.isExpanded = value;
-      this.toggle();
-    }
   }
 
   get collapse(): boolean {
     return this.isExpanded;
   }
 
-  private _display = 'block';
   private _isAnimationDone?: boolean;
   private _player?: AnimationPlayer;
   private _stylesLoaded = false;
@@ -104,6 +85,15 @@ export class CollapseDirective implements AfterViewChecked {
     this._factoryExpandAnimation = _builder.build(expandAnimation);
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if ('collapse' in changes) {
+      if (!this._player || this._isAnimationDone) {
+        this.isExpanded = this.collapseNewValue;
+        this.toggle();
+      }
+    }
+  }
+
   ngAfterViewChecked(): void {
     this._stylesLoaded = true;
 
@@ -148,7 +138,7 @@ export class CollapseDirective implements AfterViewChecked {
   }
   /** allows to manually show collapsed content */
   show(): void {
-    this._renderer.setStyle(this._el.nativeElement, 'display', this._display);
+    this._renderer.setStyle(this._el.nativeElement, 'display', this.display);
 
     this.isCollapsing = true;
     this.isExpanded = true;