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
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 {
....
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?