5-star ranking as in tutorial not working in app

Ionic Framework Ionic Angular
1

Hello all,

I’m pretty new to Ionic, started building an App a while ago. I wanted to include a 5-star rating component so I used the method explained here:

I followed all the instructions, the problem is I get an error when I call the ranking component in the html and I cant find why:

<app-rating [(rating)]='rating'></app-rating>

That’s what I have in the html, and the error reads “Identifier ‘rating’ is not defined. The component declaration, template variable declarations, and element references do not contain such a member”

This is the beginning of my .ts file:

import { Component, Input, EventEmitter ,Output} from "@angular/core";

@Component({
  selector: 'app-rating',
  templateUrl: './rating.component.html',
  styleUrls: ['./rating.component.scss'],
})


export class RatingComponent {
  @Input() rating: number ;

  @Output() ratingChange: EventEmitter<number> = new EventEmitter();;

  constructor() {}

Any help is really appreciated, as I’m just learning Angular/ionic, I don’t have all the knowledge to be able to find a solution on my own. I tried with no luck. Please help!

Thanks

2

I find it useful in situations like this to disambiguate things: stop naming everything rating, because it obscures where problems lie.

That being said, given the wording of the error message you describe,

I would use the word “embed” or “include” - as opposed to “call” - here. Components don’t really get “called”. I’m going to call the place where you are including an <app-rating> into the host component, and that’s where I would look. When you say <app-rating [(rating)]="rating", you are telling Angular "please bind the host component’s rating property into this <app-rating> component.

If that last sentence doesn’t make complete sense to you, please take the time to go through this. I get that reading documentation is boring, and people often prefer to just dive in, watch videos, and hope that they’ll luck into finding something on the Internet that they can just copypaste. I don’t think that’s a sustainable way to actually build any skills.

If you’re still here, I read your error message as saying “the host component has no ‘rating’ property to try to bind”.