如何在ng-zorro中更改进度圆圈的笔触颜色？

Question

In my Angular project I have a dashboard in mind, which shows me different process circles. Depending on the progress I want to change the color of the line.

This is what it looks like right now. This is how it should look like.

Unfortunately I cannot change the color with eg [nzStrokeColor]="'red'".

<div class="flex">
  <nz-card class="cards" *ngFor="let card of dashboarcard">
    <nz-card-meta [nzAvatar]="avatarTemplate" [nzTitle]="card.titel" nzDescription="12.01.2019"> </nz-card-meta>
    <ng-template #avatarTemplate>
      <nz-progress [nzStrokeColor]="'red'" [nzWidth]="40" nzType="circle" [nzPercent]="card.percent"></nz-progress>
    </ng-template>
  </nz-card>
</div>

Right now it's always blue, no matter what I enter.
Do you have any idea what I'm doing wrong?

Many greetings,
Jin

Answer 1

With ng-zorro-antd@1.8.1 you can't change stroke attribute for svg:path.ant-progress-circle-path since it was added only in 7.0.0-rc.0

So I updated your Stackblitz and It actually works as intended:

You can see it changes stroke attribute to red BUT

SVG presentation attributes have lower priority than other CSS style rules specified in author style sheets or 'style' attributes .

That means that stroke="red" will be overrided by .ant-progress-circle-path class and that's what we see in the picture above.

So that the only one way to override it is to override that class.

---

Here are several ways of how it can be accomplish:

1) Add override to your global styles ( stackblitz )

styles.css

path.ant-progress-circle-path { stroke:red }

Note: we added element to class so it will have higher specificity that just class so we do not need !important here

2) Use ::ng-deep combinator in `app.component.css ( stackblitz )

app.component.css

::ng-deep .ant-progress-circle-path { stroke:red;}

3) Add the same rule to app.component.css presetting encapsulation to ViewEncapsulation.None for component ( stackblitz )

app.component.ts

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  {