//rate-passangers-modal

import {Component} from '@angular/core';
import {MatDialogRef} from '@angular/material';
import {Passenger} from './passenger';
import {StarClickMeta} from '../rating/starClickMeta';

@Component({
	selector: 'rate-passengers-modal',
	templateUrl: './rate-passengers-modal.component.html',
	styleUrls: ['./rate-passengers-modal.component.sass'],
})
export class RatePassengersModalComponent {
	passengers: Passenger[] = [
		{id: 0, name: 'Ivan', rating: 0},
		{id: 1, name: 'Egor', rating: 0},
		{id: 2, name: 'Semen', rating: 0},
		{id: 3, name: 'Fedor', rating: 0},
	];

	constructor(public dialogRef: MatDialogRef<RatePassengersModalComponent>) {}

	rateUser(clickObj: StarClickMeta): void {
		const passenger = this.passengers.find(
			(i: Passenger) => i.id === clickObj.itemId
		);
		if (!!passenger) {
			passenger.rating = clickObj.rating;
		}
	}
	exitTrip(): void {
		this.dialogRef.close();
	}

	trackById(index, item) {
		return item.id;
	}
}
///
<div class="table-content">
	<h2 class="title">Rate Passengers</h2>

	<table class="table">
		<thead>
			<tr class="table-tr">
				<th class="table-th">Passenger</th>
				<th class="table-th">Stars</th>
				<th class="table-th">Rating</th>
			</tr>
		</thead>
		<tbody>
			<tr *ngFor="let passenger of passengers; trackBy: trackById">
				<td>
					{{ passenger.name }}
				</td>
				<td>
					<app-rating
						[rating]="passenger.rating"
						[itemId]="passenger.id"
						(ratingClick)="rateUser($event)"
					></app-rating>
				</td>
				<td>{{ passenger.rating }} Stars</td>
			</tr>
		</tbody>
	</table>
	<div class="button-container">
		<button
			class="exit-button"
			mat-raised-button
			color="primary"
			(click)="exitTrip()"
		>
			exit trip
		</button>
	</div>
</div>
///
.table-content
  .table
    width: 100%
  .title
    text-align: center
    .table-tr
      text-align: center
  .button-container
    display: flex
    align-items: center
    justify-content: center
    .exit-button
      width: 6rem
      height: 2rem
  .table-th
    width: 4rem
///
rating component (звёздочки)

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {Rate} from './rate';
import {StarClickMeta} from './starClickMeta';

@Component({
	selector: 'app-rating',
	templateUrl: './rating.component.html',
	styleUrls: ['./rating.component.sass'],
})
export class RatingComponent implements OnInit {
	@Input() rating: number;
	@Input() itemId: number;
	@Output() ratingClick: EventEmitter<StarClickMeta> = new EventEmitter<
		StarClickMeta
	>();
	inputName: string;

	ratings: Rate[] = [
		{title: 'Rocks', value: 5},
		{title: 'Pretty good', value: 4},
		{title: 'Meh', value: 3},
		{title: 'Kinda bad', value: 2},
		{title: 'Sucks big time', value: 1},
	];

	constructor() {}

	ngOnInit() {
		this.inputName = this.itemId + '_rating';
	}

	onClick(rating: number): void {
		this.rating = rating;
		this.ratingClick.emit({
			itemId: this.itemId,
			rating,
		});
	}
	trackById(index, item) {
		return item.id;
	}
}
/////
<fieldset class="rating">
	<ng-container *ngFor="let rate of ratings; trackBy: trackById">
		<input
			type="radio"
			[name]="inputName"
			[value]="rate.value"
			[checked]="rating === rate.value"
		/>
		<label [title]="rate.title" (click)="onClick(rate.value)"
			>{{ rate.value }} stars</label
		>
	</ng-container>
</fieldset>
////
@import "../../../../styles/fonts-constants"
@import "../../../../styles/colour-constants"

.rating
  float: left
  border: none
.rating:not(:checked) > input
  position: absolute
  clip: rect(0,0,0,0)

.rating:not(:checked) > label
  float: right
  width: 1rem
  padding: 0.1rem
  overflow: hidden
  white-space: nowrap
  cursor pointer
  font-size: $button
  line-height: 1rem
  color: $grey
.rating:not(:checked) > label:before
  content: '★ '

.rating > input:checked ~ label
  color: $orange

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label
  color: $gold

.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label
  color: $light-orange