Pass data to HTML page (ionic/angular)

Question

I need some help to pass rating value to the HTML page.

Profile.page.ts

logRatingChange(rating){
      //code to calculate avg rating

      rating = 4.5;
  }

Profile.page.html

<ionic4-star-rating #rating
                activeIcon = "ios-star"
                defaultIcon = "ios-star-outline"
                activeColor = "#488aff" 
                defaultColor = "#f4f4f4"
                halfStar = "true"
                readonly="false"
                rating= ""   <-----Passing the rating value here
                fontSize = "32px"
                (ratingChanged)="logRatingChange($event)">
</ionic4-star-rating>

I'm not sure how to pass the rating to the component in HTML page. So sorry if this question is too noobish, since I can't find anything online related to this.

Thank you very much for your help.

Zze · Accepted Answer · 2020-12-07 02:16:00Z

You are looking for Angular data binding: https://angular.io/guide/binding-syntax

The syntax is to either wrap the html attribute in square brackets [propertyName]:

<ionic4-star-rating #rating
                activeIcon = "ios-star"
                defaultIcon = "ios-star-outline"
                activeColor = "#488aff" 
                defaultColor = "#f4f4f4"
                halfStar = "true"
                readonly="false"
                [rating]= "rating"
                fontSize = "32px"
                (ratingChanged)="logRatingChange($event)">
</ionic4-star-rating>

OR you can use the template variable reference syntax: {{varName}}

<ionic4-star-rating #rating
                activeIcon = "ios-star"
                defaultIcon = "ios-star-outline"
                activeColor = "#488aff" 
                defaultColor = "#f4f4f4"
                halfStar = "true"
                readonly="false"
                rating= "{{rating}}"
                fontSize = "32px"
                (ratingChanged)="logRatingChange($event)">
</ionic4-star-rating>

Hien Nguyen · Accepted Answer · 2020-12-07 04:18:59Z

0

If you have rating variable as Profile page class, you can use as

<ionic4-star-rating #rating
                activeIcon = "ios-star"
                defaultIcon = "ios-star-outline"
                activeColor = "#488aff" 
                defaultColor = "#f4f4f4"
                halfStar = "true"
                readonly="false"
                [rating]= "rating"
                fontSize = "32px"
                (ratingChanged)="logRatingChange($event)">
</ionic4-star-rating>

edited Dec 7, 2020 at 4:18

answered Dec 7, 2020 at 2:09

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Collectives™ on Stack Overflow

Pass data to HTML page (ionic/angular)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related