title: Angular custom control - star rating - value from input
body: <pre><code>&lt;div class="rating"&gt;
  &lt;div style="display: inline-block"
    *ngFor="let starred of stars; let i = index"
    (click)="rate(i + (starred ? (value &gt; i + 1 ? 1 : 0) : 1))"&gt;
        &lt;ng-container *ngIf="starred; else noStar"&gt;&lt;mat-icon class="filled"&gt;star&lt;/mat-icon&gt;&lt;/ng-container&gt;
        &lt;ng-template #noStar&gt;&lt;mat-icon class="empty"&gt;star_outline&lt;/mat-icon&gt;&lt;/ng-template&gt;
      &lt;/div&gt;
  &lt;/div&gt;   
  
  
   @Component({
    selector: 'jfg-star-rating',
    templateUrl: './star-rating.component.html',
    styleUrls: ['./star-rating.component.scss'],
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() =&gt; StarRatingComponent),
        multi: true
      }
    ]
  
  })
  export class StarRatingComponent implements ControlValueAccessor{
  
    stars: boolean[] = Array(3).fill(true);
  
     // Allow the input to be disabled, and when it is make it somewhat transparent.
    @Input() disabled = false;
     @HostBinding('style.opacity')
     get opacity() {
       return this.disabled ? 1 : 1;
     }
  
     // Function to call when the rating changes.
     onChange = (rating: number) =&gt; {
     };
  
     // Function to call when the input is touched (when a star is clicked).
     onTouched = () =&gt; {
     };
  
  
     get value(): number {
       if(!this.disabled){
       return this.stars.reduce((total, starred) =&gt; {
         return total + (starred ? 1 : 0);
       }, 0);
       }
     }
     rate(rating: number) {
       if (!this.disabled) {
         this.writeValue(rating);
       }
     }
  
     // Allows Angular to update the model (rating).
     // Update the model and changes needed for the view here.
     writeValue(rating: number): void {
       if (!this.disabled) {
         this.stars = this.stars.map((_, i) =&gt; rating &gt; i);
         this.onChange(this.value);
       }
  
     }
  
     // Allows Angular to register a function to call when the model (rating) changes.
     // Save the function as a property to call later here.
     registerOnChange(fn: (rating: number) =&gt; void): void {
       this.onChange = fn;
     }
  
     // Allows Angular to register a function to call when the input has been touched.
     // Save the function as a property to call later here.
     registerOnTouched(fn: () =&gt; void): void {
       this.onTouched = fn;
     }
  
     // Allows Angular to disable the input.
     setDisabledState(isDisabled: boolean): void {
       this.disabled = isDisabled;
  
  
     }
   }
  </code></pre>
  
  <p>Im trying to make a component for star rating. I made it to work properly as an input. So i can press on the stars to get the correct value as a formControl and pass it to my services. But my problem is that i have tried to make my component to get value as an @input and set number of stars based on that value. I have tried inputing the value and setting it everywhere i could but still had no effect. If you could suggest me how can i proceed to set value form the input i would be glad :) </p>