charlesgrimont / angular-progress-bar Goto Github PK

How to remove percentage sign progress bar

I'd like to show this progress bar inside the overlap message created by ionic-angular, but I'm battling to work out how to do this.. Really hoping that it's not beyond the possibility of this module, but I'll only know if I ask.

Earlier I found an SO question that sounded much like what I'm trying to achieve, but one of the comments on the selected answer states that "it doesn't seem's to work with an Angular2 component (such as from ng2-bootstrap)."

Is this something that angular-progress-bar could be adjusted to cater for? Or is it something that I would need to implement differently when building my UI?

note: I'm still learning Angular, so please forgive me if this is a "silly" question with an obvious answer, because it's neither of those to me.

edit: Soon after posting this, I stumbled onto a page on Angular's Dynamic Component Loader, which sounds like it might allow me to render this <progress-bar> component inside the markup used to render a new loading component popup. Am I going down the right road here?

When doing ng build compilation works fine, but when doing ng build --prod it fails to compile with the following error:

ERROR in node_modules\angular-progress-bar\dist\src\progress-bar\progress-bar.d.ts.ProgressBarComponent.html(2,33): : Argument of type 'string' is not assignable to parameter of type 'number'.
node_modules\angular-progress-bar\dist\src\progress-bar\progress-bar.d.ts.ProgressBarComponent.html(2,154): : Argument of type 'string' is not assignable to parameter of type 'number'.

My package.json:

{
  "name": "material",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "0.6.3",
    "@angular/animations": "6.0.3",
    "@angular/cdk": "^6.1.0",
    "@angular/common": "6.0.3",
    "@angular/compiler": "6.0.3",
    "@angular/core": "6.0.3",
    "@angular/flex-layout": "^6.0.0-beta.16",
    "@angular/forms": "6.0.3",
    "@angular/http": "6.0.3",
    "@angular/material": "^6.1.0",
    "@angular/platform-browser": "6.0.3",
    "@angular/platform-browser-dynamic": "6.0.3",
    "@angular/router": "6.0.3",
    "@aspnet/signalr": "^1.0.2",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "@swimlane/ngx-charts": "^7.0.1",
    "@swimlane/ngx-datatable": "^11.1.5",
    "angular-progress-bar": "^1.0.3",
    "core-js": "^2.4.1",
    "d3": "^4.8.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "moment": "^2.20.0",
    "ngx-perfect-scrollbar": "^5.0.0",
    "ngx-quill": "^3.1.0",
    "popper.js": "^1.14.3",
    "rxjs": "^6.2.0",
    "rxjs-compat": "^6.2.0",
    "rxjs-tslint": "^0.1.4",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.0.5",
    "@angular/compiler-cli": "6.0.3",
    "@angular/language-service": "6.0.3",
    "@types/chartist": "^0.9.37",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.2.5",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "2.7.2",
    "@angular-devkit/build-angular": "~0.6.3"
  }
}

How do I hide the progress shown in percentage inside or show some other text instead?

How did you manage to config the progress bar to show that way in the demo? I need it only o thin bar on the top of the content in ionic.
Can you help? I am messing with the CSS, but...

• I'm submitting a ...

  • bug report
  • feature request
  • support request

• What is the current behavior?
  When upgrading to Angular 7, an unmet peer dependency is displayed...
  

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem
  I used this demo to upgrade to Angular 7 - Upgrade to Angular 7

• What is the expected behavior?
  For angular-progress-bar to be able to accept Angular 7

• What is the motivation / use case for changing the behavior?
  To be on the latest Angular builds

I was experiencing this issue on my site. I wanted to see if it was happening with the demo, and it is, so I wanted to let you know.

I want it to be a static progress bar.
Is there a way I can only show progress without the text.
Also is there a way to set min, max and value for the progress bar

Progress bar could use a style property for overriding internal elements styles.

<progress-bar [progress]="10" [color]="'#488aff'" styles="
.progress-outer {
            border-radius: 0;
        }
"></progress-bar>

Great component btw, just need to expose some internal settings!

Any possible way to add animation? which mean the progress bar start from zero to specific value smoothly

`ERROR Error: Uncaught (in promise): Error: Template parse errors:
'progress-bar' is not a known element:

1. If 'progress-bar' is an Angular component, then verify that it is part of this module.
2. If 'progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   [ERROR ->]

   ---

"): ng:///CropDetailPageModule/CropDetailPage.html@12:6
Error: Template parse errors:
'progress-bar' is not a known element:

1. If 'progress-bar' is an Angular component, then verify that it is part of this module.
2. If 'progress-bar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   [ERROR ->]

   ---

"): ng:///CropDetailPageModule/CropDetailPage.html@12:6
at syntaxError (compiler.js:2547)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:19495)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:25041)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:25028)
at compiler.js:24971
at Set.forEach ()
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24971)
at compiler.js:24881
at Object.then (compiler.js:2538)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24880)
at syntaxError (compiler.js:2547)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:19495)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:25041)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:25028)
at compiler.js:24971
at Set.forEach ()
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24971)
at compiler.js:24881
at Object.then (compiler.js:2538)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24880)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:14051)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)`

I'm try to install this module with npm. When i use it on HTML some thing like this, i dont know how to solve this. Somebody can save me ???? :( :(

We are using Angular 14 and this library is not working with the latest version. it has support until Angular 7.1. Is there any plan to upgrade this library to the latest version of angular?

Initially we are setting progress bar width to 0 but at 0 some part of the progress bar(5 to 10 percentage) showing as completed.

How can I change de background-color of .product-inner acordding with the %?

Example 1: if the % <= 20, then the background-color should be red
Example 2: if the % >= 20 & <=50, then the background-color should be yellow
Example 3: if the % > 50, then the background-color should be green

Is there a way we can set the Max value to the Progress bar? As of now it is taking only 100.

But if we have to use this for a timer progress bar then we might have to set it to some predefined value.

For example, if i have to use this module for as the timer progress module. Where in i give the MAX value as 15s / 30s etc.

Please, add support for Angular 9+.

I want to just show the progress bar without the text on it. How can hide the text?