Search code examples
javascriptangularangular7ng-zorro-antd

How can i change the stroke color of the progress circle in ng-zorro?

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. how it looks This is how it should look like. how it should look

Unfortunately I cannot change the color with e.g [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

Solution

  • 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:

    enter image description here

    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  {