Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

380
Visualizações
How to bind md-progress-spinner's color in Angular 2 Material 2, to a custom color?

I want to use md-progress-spinner, to display percentage of the work done, yet I want to change it's stroke color from red to green dynamically based on the percentage.

How can I do that?

<md-progress-spinner 
     class="number" 
     mode="determinate" 
     [value]="today?.MemorizationPercent" 
     [style.background]="today?.MemorizationStateColor">
</md-progress-spinner>
about 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

After reading the comments while looking for a solution to my own problem, I was able to come up with the following fix. It's not pretty, but until they open up the color attribute to accept more than three colors, this will serve as a temporary solution.

The spinner is an SVG circle, so it's properties can be modified via CSS. You can change the color of the circle with stroke, and the background of the circle with fill.

In the HTML:

<mat-spinner class="very-pink"></mat-spinner>

In the CSS:

.very-pink::ng-deep circle {
  stroke: fuchsia;
}

Here is a link to a stackblitz demonstrating it.

EDIT: Thanks to ConquerorsHaki for pointing this out - /deep/, >>> and ::ng-deep have been deprecated. For the moment they still work, and one would hope that a migration script will be provided before they kill it. That said, this is not an optimal solution.

about 4 years ago · Santiago Trujillo Relatório

0

Have a look at demo-app example https://github.com/angular/material2/tree/master/src/demo-app/progress-spinner

You need to bind to [color] property.

Then in your code you can keep the logic that will change the color dynamically as you need based on your percentage value. e.g:

Template:

<md-progress-spinner 
     class="number" 
     mode="determinate" 
     [value]="today?.MemorizationPercent" 
     [color]="getColor(today?.MemorizationPercent)">
</md-progress-spinner>

Function getColor()sample:

getColor(percentage) {
   return percentage > 50 ? '_red_' : '_green_';
}

You need to define the colors in your custom material palette.

UPDATE:

important notice on your '_red_' and '_green_' colors:

The color of the progress-spinner. Can be primary, accent, or warn

As per progress-spinner source code https://github.com/angular/material2/blob/master/src/lib/progress-spinner/progress-spinner.ts#L110

/** The color of the progress-spinner. Can be primary, accent, or warn. */
  @Input()
  get color(): string { return this._color; }
  set color(value: string) {
    if (value) {
      this._renderer.removeClass(this._elementRef.nativeElement, `mat-${this._color}`);
      this._renderer.addClass(this._elementRef.nativeElement, `mat-${value}`);
      this._color = value;
    }

So getColor() becoming like say:

getColor(percentage) {
   return percentage > 50 ? 'accent' : 'warn';
}

If you not happy with any colors from prebuild theme palettes than you have to create our own, see https://material.angular.io/guides for more details

about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda