Reusable component with input property is is not rendering correctly on parent component if used multiple times

I have created a reusable component (star rating) and I am planning to use it at multiple places to rate different things, it is working fine when I use the reusable component only once but it is not getting rendered when I use it multiple times on a component.

as you might have guessed, the reusable component (star rating component) has stars which will be highlighted when the @input property has some value in it, for e.g if @input property has 3 then 3 stars will be highlighted and if 4 then 4 stars.

when I use it at a place where the reusable component (star rating component) is used multiple times and if the different component has different value if @input property only last is considered.

I have made a mini demo of that and pasting the code of that to understand

rating.component.html

<div class="rating-wrapper">
<!-- star 5 -->
<input type="radio" id="5-star-rating" name="star-rating" value="5" [checked]="starrating === '5'" (change)="onRatingChange($event.target)" [(ngModel)]="starrating">
<label for="5-star-rating" class="star-rating">
<i class="fa fa-star d-inline-block"></i>
</label>
<!-- star 4 -->
<input type="radio" id="4-star-rating" name="star-rating" value="4" [checked]="starrating === '4'" (change)="onRatingChange($event.target)" [(ngModel)]="starrating" >
<label for="4-star-rating" class="star-rating star">
<i class="fa fa-star d-inline-block"></i>
</label>
<!-- star 3 -->
<input type="radio" id="3-star-rating" name="star-rating" value="3" [checked]="starrating === '3'" (change)="onRatingChange($event.target)" [(ngModel)]="starrating">
<label for="3-star-rating" class="star-rating star">
<i class="fa fa-star d-inline-block"></i>
</label>
<!-- star 2 -->
<input type="radio" id="2-star-rating" name="star-rating" value="2" [checked]="starrating === '2'" (change)="onRatingChange($event.target)" [(ngModel)]="starrating">
<label for="2-star-rating" class="star-rating star">
<i class="fa fa-star d-inline-block"></i>
</label>
<!-- star 1 -->
<input type="radio" id="1-star-rating" name="star-rating" value="1" [checked]="starrating === '1'" (change)="onRatingChange($event.target)" [(ngModel)]="starrating">
<label for="1-star-rating" class="star-rating star">
<i class="fa fa-star d-inline-block"></i>
</label>
</div>

rating.component.css

.container-wrapper {
background-color: #EDF0F9;
}
.container {
height: 100vh;
}
.rating-wrapper {
align-self: center;
/* box-shadow: 7px 7px 25px rgba(198, 206, 237, 0.7), -7px -7px 35px rgba(255, 255, 255, 0.7), inset 0px 0px 4px rgba(255, 255, 255, 0.9), inset 7px 7px 15px rgba(198, 206, 237, 0.8); */
border-radius: 4rem;
display: inline-flex;
direction: rtl !important;
padding: 1.5rem 2.5rem;
margin-left: auto;
}
.rating-wrapper label {
color: #E1E6F6;
cursor: pointer;
display: inline-flex;
font-size: 2.1rem;
padding: 1rem 0.6rem;
transition: color 0.5s;
}
.rating-wrapper svg {
-webkit-text-fill-color: transparent;
-webkit-filter: drop-shadow 4px 1px 6px #c6ceed;
filter: drop-shadow(5px 1px 3px #c6ceed);
}
.rating-wrapper input {
height: 100%;
width: 100%;
}
.rating-wrapper input {
display: none;
}
.rating-wrapper label:hover,
.rating-wrapper label:hover ~ label,
.rating-wrapper input:checked ~ label {
color: #34AC9E;
}
.rating-wrapper label:hover,
.rating-wrapper label:hover ~ label,
.rating-wrapper input:checked ~ label {
color: #34AC9E;
}

rating.component.ts

import { Component, Input } from '@angular/core';
@Component({
selector: 'app-rating',
templateUrl: './rating.component.html',
styleUrls: ['./rating.component.css']
})
export class RatingComponent {
constructor(){}
@Input()  starrating:string='3';  //<== this will get value and the stars will be highlighted
onRatingChange(val:any){
//blah blah blah
}
}

when I use it in my other component it is not getting rendered

Manytimes.Component.html

<div *ngFor="let item of arrayResponse">
<img
src="assets\150.png"
class="img-fluid rounded-circle mb-3"
alt="coach image"
/> <br>
<div>{{item.name}}</div>
<app-rating [starrating]="item?.rating"></app-rating>  // here I am passing the value of how many star should get highlighted
</div>

Manytimes.Component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-manytimes',
templateUrl: './manytimes.component.html',
styleUrls: ['./manytimes.component.css']
})
export class ManytimesComponent {
// just for demo the below response is hard coded, but actually it will come from api response
arrayResponse:any=[
{
"name":"ram",
"rating":"3"
},
{
"name":"Dinesh",
"rating":"1"
},
{
"name":"ganesh",
"rating":"2"
},
]
}

when this is renderd in my app I am expecting the first should have 3 star highlighted, then 1 star and the last should have 2 star hightlighted

but only the last is highlighted with 2 star and all other are blanks

why this might be happening? I read a lot of other answers but could not get it worked. can anyoen please help?
thanks

The main problem is that the @Input() starrating:string='3'; mutates the view, so that the directive [(ngModel)] gets the last emitted value, which is '2'.

Here, the solution uses an additional identifier, and later on u a use of it in child component - rating. You could do this in multiple ways, for sample the index position in array is collected and passed as <app-rating [componentId]="i"></app-rating>

<div *ngFor="let item of arrayResponse; let i = index">
<img src="assets\150.png" class="img-fluid rounded-circle mb-3" alt="coach image"/> <br>
<div>{{item.name}}</div>
<app-rating [starrating]="item?.rating" [componentId]="i"></app-rating>
</div>

The updated Rating component:

  ngOnInit() {
this.selectedRating[this.componentId] = this.starrating;
}
@Input() starrating: any = '3';
@Input() componentId: number = 0;
selectedRating: { [componentId: string]: string } = {};
onRatingChange(componentId: number, rating: string) {
this.selectedRating[componentId] = rating;
}

Here you can notice that we created a new object selectedRating, which holds the temporary data. You could actually create this object on parent level and pass it as additional input to child component, so that you would not lose the data holded by new Input, however for this sample lets skip this.

Since we initiate a new variables - @Input() componentId: number = 0; and selectedRating: { [componentId: string]: string } = {}; we need to make use of them in rating.component.html:

<div class="rating-wrapper">
<ng-container *ngFor="let star of ['5', '4', '3', '2', '1']">
<input
type="radio"
[id]="star + '-star-rating-' + componentId"
[name]="componentId + '-star-rating'"
[value]="star"
[ngModel]="selectedRating[componentId]"
(change)="onRatingChange(componentId, star)"
/>
<label [for]="star + '-star-rating-' + componentId" class="star-rating">
<i class="fa fa-star d-inline-block"></i>
</label>
</ng-container>
</div>

Here I:

• Simplified a code to resolve the DRY principle
• Added a new property name which holds a unique value per component. It's important manner, since it ensures that the change in one component of stars, won't affect the other.
• Assign an index of component in id of input
• Adjusted ngModel directive
• Wrote the (change) method logic
• Skipped the checked directive

When you use a property and you want to make a two ways binding you need one@Input and one @Output, see the docs -see that the "ouput name it's the property+Change"

  @Input()  starrating!: number | string;
@Output() starratingChange = new EventEmitter<number|string>();

When you use a input type radio and you want to create a "radio group", the inputs should to have a "name". But this property should be unique to the "whole group". Your components have always the same name: star-rating

You can choose two options, use a external variable or force user to makes an atribute "name", see this SO

let StarratingUniqueId = 0;
@Component({
...
}){
export class RatingComponent {
id:number;
constructor(){
this.id=StarratingUniqueId ++;
}
}

Or

constructor(@Optional() @Attribute('name') public name:string){
if (!name)
throw new Error("The name attribute it's neccessary")
}

Instead of use checked you can use some like

[class.checked]="starrating === '1'"

And use

input.checked{...}

When you use the same value for the name attribute in multiple input elements within a form, it can lead to unexpected behavior because the browser treats those inputs as part of the same group. This can cause issues with form submission and data handling. And when you use ngModel binding on multiple inputs with the same name, all those inputs might be bound to the same property in your component. As a result, changes in one input will immediately be reflected in all other inputs sharing the same name.

You could give unique value for the name property here.

rating.component.html

<div class="rating-wrapper">
<!-- star 5 -->
<input
type="radio"
id="5-star-rating"
name="5-star-rating"
value="5"
[checked]="starrating === '5'"
[(ngModel)]="starrating"
/>
<label for="5-star-rating" class="star-rating">
<i class="fa fa-star d-inline-block"></i>
</label>
<!-- star 4 -->
<input
type="radio"
id="4-star-rating"
name="4-star-rating"
value="4"
[checked]="starrating === '4'"
[(ngModel)]="starrating"
/>
<label for="4-star-rating" class="star-rating star">
<i class="fa fa-star d-inline-block"></i>
</label>
<!-- star 3 -->
<input
type="radio"
id="3-star-rating"
name="3-star-rating"
value="3"
[checked]="starrating === '3'"
[(ngModel)]="starrating"
/>
<label for="3-star-rating" class="star-rating star">
<i class="fa fa-star d-inline-block"></i>
</label>
<!-- star 2 -->
<input
type="radio"
id="2-star-rating"
name="2-star-rating"
value="2"
[checked]="starrating === '2'"
[(ngModel)]="starrating"
/>
<label for="2-star-rating" class="star-rating star">
<i class="fa fa-star d-inline-block"></i>
</label>
<!-- star 1 -->
<input
type="radio"
id="1-star-rating"
name="1-star-rating"
value="1"
[checked]="starrating === '1'"
[(ngModel)]="starrating"
/>
<label for="1-star-rating" class="star-rating star">
<i class="fa fa-star d-inline-block"></i>
</label>
</div>

We can also simplify the code by using Angular's ngFor directive to dynamically generate star rating inputs based on an array of values.

<div class="rating-wrapper">
<ng-container *ngFor="let rating of [5, 4, 3, 2, 1]">
<input
type="radio"
[id]="rating + '-star-rating'"
[name]="'star-rating-' + rating"
[value]="rating"
[checked]="starrating === rating.toString()"
/>
<label [for]="rating + '-star-rating'" class="star-rating">
<i class="fa fa-star d-inline-block"></i>
</label>
</ng-container>
</div>