squareetlabs / ionic-rating-component

A component for rating in Ionic 5. Show evaluation. A quick rating operation on something.
Other
4 stars 21 forks source link

ionic-rating-component element not hydrating in modal component #4

Closed etichenor closed 3 years ago

etichenor commented 3 years ago

I have implemented ionic-rating-component in an ionic 5/angular 9 page component (FeatureListComponent) and this works as expected. When the user clicks on the star rating element from this page (a nearby tag), I popup another component (ItemRatingComponent) into ModalController. The modal parent is the original page containing the rating component, so I'd expect it to work. But it does not hydrate. Meaning, I can see the element in the DOM, but it is not 'converted/hydrated' to the star rating elements and buttons. HTML in the modal remains as: <ionic-rating-component _ngcontent-pve-c138="" activeicon="star" defaulticon="star-outline" halficon="star-half" activecolor="#f5c61d" defaultcolor="#b3b1ad" readonly="true" halfstar="true" fontsize="36px" id="irc_21062"></ionic-rating-component> ... and has no visible UI of course.

So the question is, have you tested ionic-rating-component inside a modal?

MORE...

My Features page/module imports the ionic-rating-component as well as the ItemReviewComponent which is what will open inside the modal:

Features.module.ts ... import { IonicRatingComponentModule, IonicRatingComponent } from 'ionic-rating-component'; import { ItemReviewComponent } from '../../components/item-review/item-review.component';

@NgModule({ imports: [ CommonModule, FormsModule, IonicModule, TranslateModule.forChild(), FeaturesRoutingModule, IonicRatingComponentModule, SharedModule ], entryComponents: [MapperMapplicComponent, ItemReviewComponent], declarations: [FeaturesPage, FeaturesListComponent, FeaturesDetailComponent] }) export class FeaturesPageModule {}

ItemReviewComponent showing @Component decorator (and I wasn't sure I needed to but I've also imported the IonicRatingComponent) ... import { IonicRatingComponent } from 'ionic-rating-component';

@Component({ selector: 'app-item-review', templateUrl: './item-review.component.html', styleUrls: ['./item-review.component.scss'], }) export class ItemReviewComponent implements OnInit {

public modalTitle: string = 'Reviews for Place';

....

And, the HTML is basically out of the box (no bindings or anything just yet): <ionic-rating-component id="blah" activeIcon="star" defaultIcon="star-outline" halfIcon="star-half" activeColor="#f5c61d" defaultColor="#b3b1ad" readonly="true" halfStar="true" rating=3 fontSize="36px"> </ionic-rating-component>

Any idea why ionic-rating-component wouldn't work inside a Modal?

jcancig commented 3 years ago

Hello @etichenor!! First of all, thank you for using this plugin. The first implementation and tests that we carried out was precisely in a modal, I am attaching an image. In order to help you I would need to see the full implementation. All the best Screenshot_20210314-122141