crisbeto / angular-svg-round-progressbar

Angular module that uses SVG to create a circular progressbar
https://crisbeto.github.io/angular-svg-round-progressbar/
MIT License
741 stars 173 forks source link

progressbar inside a custom component #161

Closed bakman23 closed 6 years ago

bakman23 commented 6 years ago

Hello! thanks for that's tool! I would like put the progress bar inside a custom component I developped, when I start the app I get this error : Can't bind to 'current' since it isn't a known property of 'round-progress'.

this is my component's module : `import { NgModule } from '@angular/core'; import { TranslateModule } from '@ngx-translate/core'; import { IonicPageModule } from 'ionic-angular';

import { EnregistrementAudioPage } from './enregistrement-audio'; import { ComponentsModule } from '../../../components/components.module'; import {RoundProgressModule} from 'angular-svg-round-progressbar';

@NgModule({ declarations: [ EnregistrementAudioPage, ], imports: [ IonicPageModule.forChild(EnregistrementAudioPage), TranslateModule.forChild(), ComponentsModule, RoundProgressModule ], exports: [ EnregistrementAudioPage ] }) export class EnregistrementAudioPageModule { }`

the component html <div class="box-btn-audio" *ngIf="mode == 'record'"> <img class="delete-btn" src="assets/img/btn-del.svg" (click)="cancelAudio()"> <img [src]="imgButton" (click)="nextState()"> <img class="validate-btn" src="assets/img/btn-valider-blue.svg" *ngIf="currentState == 4" (click)="validerAudio()"> <round-progress [current]="currentProgress" [max]="100"></round-progress> </div>

Thanks in advance :)

bakman23 commented 6 years ago

A found it, it's pretty simple :)

just needed to import in components.module.ts

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IonicModule } from 'ionic-angular'; import { MyCustomComponent } from './somepath'; import { RoundProgressModule } from 'angular-svg-round-progressbar'; @NgModule({ declarations: [MyCustomComponent], imports: [CommonModule, IonicModule, RoundProgressModule ], exports: [MyCustomComponent] }) export class ComponentsModule {}

and import in your page module the ComponentsModule.