riteshgandhi / ng-star-rating

Highly Customizable and Responsive Star Rating library built using Angular
MIT License
38 stars 11 forks source link

Doesn't work in Angular 9 #15

Open MusabBasheer opened 4 years ago

MusabBasheer commented 4 years ago

mainElement is always undefined

DriesX commented 4 years ago

Same issue here!

riteshgandhi commented 4 years ago

Oh, I think there is some issue on my side. My bad, I will fix it during this weekend.

riteshgandhi commented 4 years ago

Can you try now? Get version 1.0.19

I also updated demo app to work with latest angular version

https://ng-starratingdemo.stackblitz.io/

MusabBasheer commented 4 years ago

same issue mainElement is always undefined

riteshgandhi commented 4 years ago

same issue mainElement is always undefined

can you send me sample code? I have tested many times and also updated demo app on stackblitz to use Angular 9. check that also.

MusabBasheer commented 4 years ago
 <star-rating value="0" totalstars="5" checkedcolor="#14addb" uncheckedcolor="gray" size="30px"
 readonly="false" (rate)="onRate($event)">
onRate($event: { oldValue: number, newValue: number, starRating: StarRatingComponent }) {

    let reviewApiModel = new ReviewApiModel();
    reviewApiModel.entityType = this.entityType;
    reviewApiModel.referencedEntityId = this.referencedEntityId;
    reviewApiModel.rating = $event.newValue;
    this.apiHandler
      .post<BaseApiResponse<Array<ReviewApiModel>>, ReviewApiModel>(this.constantsService.putRateApiUrl, reviewApiModel)
      .subscribe(data => {

      });
  }

Untitled

riteshgandhi commented 4 years ago
 <star-rating value="0" totalstars="5" checkedcolor="#14addb" uncheckedcolor="gray" size="30px"
 readonly="false" (rate)="onRate($event)">
onRate($event: { oldValue: number, newValue: number, starRating: StarRatingComponent }) {

    let reviewApiModel = new ReviewApiModel();
    reviewApiModel.entityType = this.entityType;
    reviewApiModel.referencedEntityId = this.referencedEntityId;
    reviewApiModel.rating = $event.newValue;
    this.apiHandler
      .post<BaseApiResponse<Array<ReviewApiModel>>, ReviewApiModel>(this.constantsService.putRateApiUrl, reviewApiModel)
      .subscribe(data => {

      });
  }

thanks, is it possible to send angular.json and package.json? I'll create project locally using that setting and try to recreate the issue.

MusabBasheer commented 4 years ago

App.zip

riteshgandhi commented 4 years ago

App.zip

Not sure what is the issue at your end. Check the attached. I added demo project and works fine.

Can you try running the attached code at your end?

test.zip

ihor-zinchenko commented 4 years ago

angular 9 http://joxi.ru/Drlv9w6sVOwJn2 , stars aren't displayed (

riteshgandhi commented 4 years ago

angular 9 http://joxi.ru/Drlv9w6sVOwJn2 , stars aren't displayed (

what browser are you using? I have tested in Chrome, FireFox. Edge browser requires webcomponents bundle.

Also checkout sample app

https://ng-starratingdemo.stackblitz.io/

ihor-zinchenko commented 4 years ago

hm, strange https://ng-starratingdemo.stackblitz.io works correctly i'm using Opera Browser (latest version) Maby using rating impossible in the custom module? (but it worked vs angular 8 and 1.0.11 version of your library, but stop working on larger)

riteshgandhi commented 4 years ago

hm, strange https://ng-starratingdemo.stackblitz.io works correctly i'm using Opera Browser (latest version) Maby using rating impossible in the custom module? (but it worked vs angular 8 and 1.0.11 version of your library, but stop working on larger)

I think it could be due to shadowdom. I'm using that viewencaptulation now. Can you try adding reference of webcomponent bundle? Demo app that I shared uses it

ihor-zinchenko commented 4 years ago

ill try tommorow, thanks for your responce)

MusabBasheer commented 4 years ago

App.zip

Not sure what is the issue at your end. Check the attached. I added demo project and works fine.

Can you try running the attached code at your end?

test.zip

project not working

riteshgandhi commented 4 years ago

App.zip

Not sure what is the issue at your end. Check the attached. I added demo project and works fine. Can you try running the attached code at your end? test.zip

project not working

what error? did you install required packages?

ihor-zinchenko commented 4 years ago

ERROR in src/app/app.component.ts:11:14 - error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tscon fig' or 'jsconfig' to remove this warning.

riteshgandhi commented 4 years ago

ERROR in src/app/app.component.ts:11:14 - error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tscon fig' or 'jsconfig' to remove this warning.

try setting that option in your tsconfig

"experimentalDecorators": true

ihor-zinchenko commented 4 years ago

it works! But I don't understand why it does not work in my project) I see that: http://joxi.ru/xAeLOpbFRqYbQ2

ItsWendell commented 4 years ago

@IhorVimmi having the same issue when upgraded to Angular 9, I do see the shadow dom with some div and span's loaded in there but they are invisible. Have you found a fix yet?

ihor-zinchenko commented 4 years ago

@ItsWendell https://github.com/riteshgandhi/ng-star-rating/issues/18 )))

AlonsoK28 commented 4 years ago

I've updated to ng 9

core.js:5882 ERROR TypeError: Cannot read property 'nativeElement' of undefined at StarRatingComponent.setStars (ng-starrating.js:332) at SafeSubscriber._next (ng-starrating.js:58) at SafeSubscriber.__tryOrUnsub (Subscriber.js:183) at SafeSubscriber.next (Subscriber.js:122) at Subscriber._next (Subscriber.js:72) at Subscriber.next (Subscriber.js:49) at Subject.next (Subject.js:39) at StarRatingComponent.set totalstars [as totalstars] (ng-starrating.js:197) at setInputsFromAttrs (core.js:13037) at instantiateAllDirectives (core.js:12744) defaultErrorLogger @ core.js:5882 23:14:40.361

But project now doesn't work 😥

Pttttn commented 4 years ago

Hi, it got broken for me when I've migrated to Angular 9, the problem was in argument types <star-rating value="3" totalstars="5" I've changed to <star-rating [value]="3" [totalstars]="5" And it started working again.

ihor-zinchenko commented 4 years ago

@Puten please read previous messages, https://github.com/riteshgandhi/ng-star-rating/issues/18 is solution

muhammadateek commented 2 years ago

Hi, it got broken for me when I've migrated to Angular 9, the problem was in argument types <star-rating value="3" totalstars="5" I've changed to <star-rating [value]="3" [totalstars]="5" And it started working again.

Its working for me also. thanks