cloudzard
commented
3 years ago Hello, I successfully implemented it in Ionic 5.
Installation Command
sudo npm install ng-circle-progress --save
App.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule } from '@ionic/storage';
import { NgCircleProgressModule } from 'ng-circle-progress';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, IonicStorageModule.forRoot(),
NgCircleProgressModule.forRoot({
"backgroundPadding": -2,
"radius": 78,
"space": -10,
"toFixed": 0,
"maxPercent": 880,
"outerStrokeGradient": true,
"outerStrokeWidth": 11,
"outerStrokeColor": "#3275a3",
"outerStrokeGradientStopColor": "#0cfeff",
"innerStrokeColor": "#e7e8ea",
"innerStrokeWidth": 5,
"imageHeight": 150,
"imageWidth": 127,
"animateTitle": false,
"animationDuration": 1000,
"showUnits": false,
"showBackground": false,
"clockwise": false,
"startFromZero": false,
"lazy": false})
],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}Home.module.ts (this is where I'm going to use it, if it's not specified here it won't work)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { HomePageRoutingModule } from './home-routing.module';
import { HomePage } from './home.page';
import { NgCircleProgressModule } from 'ng-circle-progress';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HomePageRoutingModule,
NgCircleProgressModule
],
declarations: [HomePage]
})
export class HomePageModule {}Home.page.html
<ion-header>
<ion-toolbar>
<ion-title>home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<circle-progress
[percent]="85"
[radius]="100"
[outerStrokeWidth]="11"
[innerStrokeWidth]="5"
[animation]="true"
[animationDuration]="300"
></circle-progress>
</ion-content>
shannsoft
Hi, these are my dependencies:
Usage:
Ng circle components is not showed,although it exists in html with 0 width and height,anyone know what can be wrong?