fix(progressbar): progress stays striped when type changes

Fixes #1035 Closes #1038
ng-bootstrap · Nov 13, 2016 · e3af043 · e3af043
1 parent 1702df9
commit e3af043
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/progressbar/progressbar.spec.ts b/src/progressbar/progressbar.spec.ts
@@ -164,6 +164,19 @@ describe('ngb-progressbar', () => {
       expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('progress-striped');
       expect(getProgressbar(fixture.nativeElement)).not.toHaveCssClass('false');
     });
+
+    it('should stay striped when the type changes', () => {
+      const html = '<ngb-progressbar [value]="value" [type]="type" [striped]="true"></ngb-progressbar>';
+      const fixture = createTestComponent(html);
+
+      expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('progress-warning');
+      expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('progress-striped');
+
+      fixture.componentInstance.type = 'success';
+      fixture.detectChanges();
+      expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('progress-success');
+      expect(getProgressbar(fixture.nativeElement)).toHaveCssClass('progress-striped');
+    });
   });
 
   describe('Custom config', () => {

diff --git a/src/progressbar/progressbar.ts b/src/progressbar/progressbar.ts
@@ -9,9 +9,8 @@ import {NgbProgressbarConfig} from './progressbar-config';
   selector: 'ngb-progressbar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <progress class="progress {{type ? 'progress-' + type : ''}}" 
-      [class.progress-animated]="animated" 
-      [class.progress-striped]="striped"
+    <progress class="progress{{type ? ' progress-' + type : ''}}{{animated ? ' progress-animated' : ''}}{{striped ? 
+    ' progress-striped' : ''}}" 
       [max]="max" [value]="getValue()">
       <div class="progress">
         <span class="progress-bar" [style.width.%]="getPercentValue()"><ng-content></ng-content></span>