how to use ng-circle-progress src code in an angular project?

I’m using angular 6 and I want to use ng-circle-progress. I implemented the circles but I want to change something that I think I should do it from the src code. there is a units and title options in the circles and I want them to get closer to each other. How can I do it?

app.module.ts

import {
  NgCircleProgressModule
} from 'ng-circle-progress';

imports: [
  CommonModule,
  RouterModule.forChild(HomeRoutingModule),
  NgCircleProgressModule.forRoot({
    "units": "Liter",
    "outerStrokeLinecap": "butt"
  })
]

home.component.html <circle-progress [percent]="65" [radius]="100" [outerStrokeWidth]="8" [innerStrokeWidth]="2" [outerStrokeColor]=tank.outerColor [innerStrokeColor]="'#e2e2e2'" [animation]="true" [animationDuration]="300" [space]="5" [showSubtitle]= "false" [showUnits]= "true" [unitsFontSize]= "15" [titleFontSize]= "45" [clockwise]= "false"> </circle-progress>

and this is the image of output. how can I control the space between 65 and liter?

[faribajpr]

@bootsoon I solved it, I should put CircleProgressOptions in providers list in app.module! thanks for your helps!

[dhair-seva]

Hope this helps someone in the future.

With this type of library, manually importing a provider isn’t best since the library should expose it. After looking into the module, it looks like CircleProgressOptions is only exposed if you add the forRoot() in your module.

See code below:

  static forRoot(options: CircleProgressOptionsInterface = {}): ModuleWithProviders {
    return {
      ngModule: NgCircleProgressModule,
      providers: [
        {provide: CircleProgressOptions, useValue: options}
      ]
    };
  }

After doing this, it fixed it on my end.

So in my module, I had this in my list of imports:

NgCircleProgressModule.forRoot(),