fix(stepper): fix change detection issue when number of step content …

…children changed (#989)

src/platform/core/steps/step-body/step-body.component.html

@@ -1,16 +1,18 @@
 <ng-content></ng-content>
 <div class="td-step-body">
   <div class="td-step-content-wrapper"
-        [@tdCollapse]="!active">
-    <div #contentRef cdkScrollable [class.td-step-content]="contentRef.children.length || contentRef.textContent.trim()">
+       [@tdCollapse]="!active">
+    <div #contentRef cdkScrollable [class.td-step-content]="hasContent">
       <ng-content select="[td-step-body-content]"></ng-content>
     </div>
-    <div #actionsRef [class.td-step-actions]="actionsRef.children.length || actionsRef.textContent.trim()">
+    <div #actionsRef
+         [class.td-step-actions]="hasActions">
       <ng-content select="[td-step-body-actions]"></ng-content>
     </div>
   </div>
-  <div #summaryRef [@tdCollapse]="active || !isComplete()"
-                    [class.td-step-summary]="summaryRef.children.length || summaryRef.textContent.trim()">
+  <div #summaryRef
+       [@tdCollapse]="active || !isComplete()"
+       [class.td-step-summary]="hasSummary">
     <ng-content select="[td-step-body-summary]"></ng-content>
   </div>
 </div>

src/platform/core/steps/step-body/step-body.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewChild, ElementRef } from '@angular/core';
 
 import { StepState } from '../step.component';
 
@@ -14,6 +14,27 @@ import { TdCollapseAnimation } from '../../common/common.module';
 })
 export class TdStepBodyComponent {
 
+  @ViewChild('contentRef', { read: ElementRef }) contentRef: ElementRef;
+
+  get hasContent(): boolean {
+    return this.contentRef &&
+          (this.contentRef.nativeElement.children.length > 0 || !!this.contentRef.nativeElement.textContent.trim());
+  }
+
+  @ViewChild('actionsRef', { read: ElementRef }) actionsRef: ElementRef;
+
+  get hasActions(): boolean {
+    return this.actionsRef &&
+          (this.actionsRef.nativeElement.children.length > 0 || !!this.actionsRef.nativeElement.textContent.trim());
+  }
+
+  @ViewChild('summaryRef', { read: ElementRef }) summaryRef: ElementRef;
+
+  get hasSummary(): boolean {
+    return this.summaryRef &&
+          (this.summaryRef.nativeElement.children.length > 0 || !!this.summaryRef.nativeElement.textContent.trim());
+  }
+
   /**
    * active?: boolean
    * Sets for active/inactive states on body.