title: Error: Template parse errors: Can't bind to 'rating' since it isn't a known property of 'rating'
body: <p>Im trying to make a rating system in a component, to import it in other pages in my app</p>
  
  <p>this is my the piece of code in home.html that give me error (Where I want the rating):</p>
  
  <pre><code>&lt;rating [(rating)]="rating"&gt; &lt;/rating&gt;
  </code></pre>
  
  <p>this is the code in rating.html:</p>
  
  <pre><code>&lt;div&gt;
    &lt;ion-icon name="star" *ngFor="let num of[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
    (click)="rate(num)" [ngStyle]="{'color': getColor(num)}"&gt;
  &lt;/ion-icon&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my code in rating.component.ts:</p>
  
  <pre><code>@Input() rating: number;
  
  @Output() ratingChange: EventEmitter&lt;number&gt; = new EventEmitter();
  
    constructor() { }
  
    rate(index: number){
      // function used to change the value of our rating 
      // triggered when user, clicks a star to change the rating
      this.rating = index;
  
      this.ratingChange.emit(this.rating);
  
    }
  
    getColor(index: number) {
      /* function to return the color of a star based on what
       index it is. All stars greater than the index are assigned
       a grey color , while those equal or less than the rating are
       assigned a color depending on the rating. Using the following criteria:
  
            1-2 stars: red
            3 stars  : yellow
            4-5 stars: green 
      */
  
      if(this.isAboveRating(index)){
        return COLORS.GREY;
      }
  
      switch(this.rating){
        case 1:
        case 2:
        case 3:
        case 4:
          return COLORS.RED;
        case 5:
        case 6: 
          return COLORS.YELLOW;
        case 7:
        case 8: 
        case 9:
        case 10:
          return COLORS.GREEN;
        default:
          return COLORS.GREY;
      }
  
    }
  
    isAboveRating(index: number): boolean {
      // returns whether or not the selected index is above ,the current rating
      // function is called from the getColor function.
  
      return index&gt; this.rating;
    }
  
  }
  
  enum COLORS {
    GREY = "#E0E0E0",
    GREEN = "#76FF03",
    YELLOW = "#FFCA28",
    RED = "#DD2C00"
  }
  </code></pre>
  
  <p>I declared the component in the home.module.ts like this:</p>
  
  <pre><code>import { RatingComponent } from '../rating/rating.component';
  
  @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      IonicModule,
      RouterModule.forChild([
        {
          path: '',
          component: HomePage
        }
      ])
    ],
    declarations: [HomePage, RatingComponent ],
    schemas: []
  })
  </code></pre>
  
  <p>this is my home.component.ts:</p>
  
  <pre><code>import { Component, ViewChild } from '@angular/core';
  import { FBServiceService } from '../services/fbservice.service';
  import { Router } from '@angular/router';
  import { IonSlides, IonInfiniteScroll } from '@ionic/angular';
  import * as CanvasJS from '../../assets/canvasjs-2.2/canvasjs.min.js';
  
  
  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
  })
  export class HomePage {
      @ViewChild('dynamicList') dynamicList;
      @ViewChild('SwipedTabsSlider') SwipedTabsSlider: IonSlides;
      @ViewChild('infiniteScroll') ionInfiniteScroll: IonInfiniteScroll;
  
      SwipedTabsIndicator: any = null;
      tabs = ["selectTab(0)", "selectTab(1)"];
      public category: any = "0";
      ntabs = 2;
  
      listado=[];
  
      listadoPanel=[];
  
      constructor(
        private FBService: FBServiceService,
        private router: Router
      ){
  
      }
  
      ionViewDidEnter(){
        this.FBService.leeNotas()
        .subscribe((querySnapshot) =&gt; {
          this.listado=[];
          querySnapshot.forEach(doc =&gt; {
  
            this.listado.push({id: doc.id,... doc.data()});
  
          });
  
          this.listadoPanel = this.listado;
  
          this.SwipedTabsIndicator = document.getElementById("indicator");
  
          let chart = new CanvasJS.Chart("chartContainer", {
            animationEnabled: true,
            title: {
              text: "Tier List "
            },
            axisX: {
              interval: 1
            },
            axisY: {
              title: "Points",
              scaleBreaks: {
                type: "wavy",
                customBreaks: [{
                  startValue: 80,
                  endValue: 210
                  },
                  {
                    startValue: 230,
                    endValue: 600
                  }
              ]}
            },
            data: [{
              type: "bar",
              toolTipContent: "&amp;lt;img src=\"https://canvasjs.com/wp-content/uploads/images/gallery/javascript-column-bar-charts/\"{url}\"\" style=\"width:40px; height:20px;\"&amp;gt; &amp;lt;b&amp;gt;{label}&amp;lt;/b&amp;gt;&amp;lt;br&amp;gt;Budget: ${y}bn&amp;lt;br&amp;gt;{gdp}% of GDP",
              dataPoints: [
                { label: "Samus", y: 17.8, gdp: 5.8, url: "israel.png" },
                { label: "Pacman", y: 22.8, gdp: 5.7, url: "uae.png" },
                { label: "Canela", y: 22.8, gdp: 1.3, url: "brazil.png"},
                { label: "Zelda", y: 24.3, gdp: 2.0, url: "australia.png" },
                { label: "Sonic", y: 36.8, gdp: 2.7, url: "skorea.png" },
                { label: "Mario", y: 41.1, gdp: 1.2, url: "germany.png" },
                { label: "Luigi", y: 46.1, gdp: 1.0, url: "japan.png" },
                { label: "Kirby", y: 48.3, gdp: 1.9, url: "uk.png" },
                { label: "Ridley", y: 55.9, gdp: 2.5, url: "india.png" },
                { label: "Cloud", y: 69.2, gdp: 5.3, url: "russia.png" },
                { label: "Ike", y: 215.7, gdp: 1.9, url: "china.png" },
                { label: "Incineroar", y: 611.2, gdp: 3.3, url: "us.png" },
                { label: "Samus", y: 17.8, gdp: 5.8, url: "israel.png" },
                { label: "Pacman", y: 22.8, gdp: 5.7, url: "uae.png" },
                { label: "Canela", y: 22.8, gdp: 1.3, url: "brazil.png"},
                { label: "Zelda", y: 24.3, gdp: 2.0, url: "australia.png" },
                { label: "Sonic", y: 36.8, gdp: 2.7, url: "skorea.png" },
                { label: "Mario", y: 41.1, gdp: 1.2, url: "germany.png" },
                { label: "Luigi", y: 46.1, gdp: 1.0, url: "japan.png" },
                { label: "Kirby", y: 48.3, gdp: 1.9, url: "uk.png" },
                { label: "Ridley", y: 55.9, gdp: 2.5, url: "india.png" },
                { label: "Cloud", y: 69.2, gdp: 5.3, url: "russia.png" },
                { label: "Ike", y: 215.7, gdp: 1.9, url: "china.png" },
                { label: "Incineroar", y: 611.2, gdp: 3.3, url: "us.png" }
              ]
            }]
          });
          chart.render();
  
        })
      }
  
      ionViewWillEnter() {
        this.category = "0";
        this.SwipedTabsSlider.length().then(l =&gt; {  //no sería necesario aquí, solo en ngOnInit
          this.ntabs = l;
        });
      }
  
      doRefresh(refresher){
        this.FBService.leeNotas()
        .subscribe(querySnapshot =&gt; {
          this.listado = [];
  
          querySnapshot.forEach((doc) =&gt; {
            this.listado.push({id:doc.id,...doc.data()});
          });
          this.listadoPanel = this.listado;
  
          refresher.target.complete();
        });
      }
  
      /* El método que permite actualizar el indicado cuando se cambia de slide*/
    updateIndicatorPosition() {
      this.SwipedTabsSlider.getActiveIndex().then(i =&gt; {
        if (this.ntabs &gt; i) {  // this condition is to avoid passing to incorrect index
          this.SwipedTabsIndicator.style.webkitTransform = 'translate3d(' + (i * 100) + '%,0,0)';
        }
      });
    }
    /* El método que anima la "rayita" mientras nos estamos deslizando por el slide*/
    animateIndicator(e) {
      //console.log(e.target.swiper.progress);
      if (this.SwipedTabsIndicator)
        this.SwipedTabsIndicator.style.webkitTransform = 'translate3d(' +
          ((e.target.swiper.progress * (this.ntabs - 1)) * 100) + '%,0,0)';
    }
  
  
  
    }
  </code></pre>