How can i display Images / Star in a Material Angular Form

Question

I have a form that displays the rating in form of star images, my back end stores it as a number in string format. So while i am playing arround i am wondering what the best material input would be to achieve this. I got this so far

I am using input with the below code

<mat-form-field>
   <input matInput placeholder="Service Value"
    formControlName ="serviceValue">
    <span>
    <ng-container *ngFor="let[].constructor(NumberConverter(form.controls.serviceValue.value))">
       <img class="star" src="../../assets/images/basic-5-point-gold-star-beveled.jpg" />
    </ng-container>
   </span>
</mat-form-field>

If there is no better mat controle to do this how do i get rid of the value 5 and be able to move my stars up. Also i hope it helps me to get rid of this error i am getting which points to this section.

SurveyResponseComponent.html:113 ERROR RangeError: Invalid array length at Object.eval [as updateDirectives] (SurveyResponseComponent.html:119) at Object.debugUpdateDirectives [as updateDirectives] (core.js:45258) at checkAndUpdateView (core.js:44270) at callViewAction (core.js:44636) at execComponentViewsAction (core.js:44564) at checkAndUpdateView (core.js:44277) at callViewAction (core.js:44636) at execEmbeddedViewsAction (core.js:44593) at checkAndUpdateView (core.js:44271) at callViewAction (core.js:44636)

Adrian Brand Adrian Brand · Accepted Answer · 2019-09-17T22:33:39

The problem is not with the image but with the ngFor statement

let[].constructor(NumberConverter(form.controls.serviceValue.value))

The template compiler is not going to be able to parse that.

Create a pipe that returns an array from a number.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'arrayFromNumber'
})
export class ArrayFromNumberPipe implements PipeTransform {
  transform(length) {
    return Array.from({ length: length }, (_, i) => i);
  }
}

And use it

*ngFor="let i of form.controls.serviceValue.value| arrayFromNumber"

See this StackBlitz https://stackblitz.com/edit/angular-mzvkyb

How can i display Images / Star in a Material Angular Form

1 Answers