refactor(circular-bar): use *ngIf instead of ngClass in progress bar template - 9.0.x (#6099)

* refactor(linear-bar): use *ngIf instead of ngClass in progress bar template

* chore(linear-bar): fix failing tests

Author: ViktorSlavov

projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss

@@ -115,7 +115,6 @@
 
     @include e(text, $m: hidden) {
         @extend %circular-text !optional;
-        @extend %circular-text--hidden !optional;
     }
 
     @include m(indeterminate) {
@@ -124,9 +123,5 @@
         @include e(outer) {
             @extend %circular-outer--indeterminate !optional;
         }
-
-        @include e(text) {
-            @extend %circular-text--hidden !optional;
-        }
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss

@@ -311,10 +311,6 @@
         fill: --var($theme, 'text-color');
     }
 
-    %circular-text--hidden {
-        visibility: hidden;
-    }
-
     @include keyframes('indeterminate-accordion') {
         from {
             stroke-dashoffset: 578;

projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts

@@ -322,7 +322,8 @@ describe('IgCircularBar', () => {
 
         componentInstance.progressbar.textVisibility = false;
         fixture.detectChanges();
-        expect(progressBarElem.children[2].classList.value).toMatch(CIRCULAR_HIDDEN_TEXT_CLASS);
+        // Text is not rendered
+        expect(progressBarElem.children[2]).toBeFalsy();
     });
 
     it('When indeterminate mode is on value should not be updated', () => {
@@ -375,8 +376,8 @@ describe('IgCircularBar', () => {
 
             componentInstance.progressbar.textVisibility = false;
             fixture.detectChanges();
-
-            expect(progressBarElem.children[2].classList.value).toMatch(CIRCULAR_HIDDEN_TEXT_CLASS);
+            // Text is not rendered
+            expect(progressBarElem.children[2]).toBeFalsy();
         }));
 
         it('The max representation should respond correctly to passed maximum value', fakeAsync(() => {

projects/igniteui-angular/src/lib/progressbar/templates/circular-bar.component.html

@@ -7,7 +7,7 @@
     [attr.aria-valuenow]="value">
     <circle class="igx-circular-bar__inner" cx="50" cy="50" r="46" />
     <circle #circle class="igx-circular-bar__outer" cx="50" cy="50" r="46" />
-    <text [class.igx-circular-bar__text--hidden]="!textVisibility" text-anchor="middle" x="50" y="60">
+    <text *ngIf="textVisibility" text-anchor="middle" x="50" y="60">
         <ng-container *ngTemplateOutlet="textTemplate ? textTemplate.template : defaultTextTemplate; context: context">
         </ng-container>
     </text>