Displaying stars using angular application

Question

I have a component, the requirement says the component should have stars wrapped in its own span tags, the number of stars to be displayed is decided by the input totalCount, I have to use ★ to show a star symbol as per requirement:

import { Component, Input, OnInit } from '@angular/core';
@Component({
  selector: 'movies-app',
  template: `
  <span *ngFor="let a of arr">{{"&#9733;"}}</span>
  `,
})
export class MovieComponent implements OnInit {
  arr = [];

  @Input('totalCount')
  public totalCount: number;

  ngOnInit() {
    this.arr = new Array(this.totalCount);
  }

}

I have a hidden test case for this program that fails with error as :

Angular Movies: Movie component - if totalCount is 4, then 4 stars should be filled (★) Output (stderr): Error: expect(received).toEqual(expected) // deep equality

Expected: "?" Received: "?" at /task/src/app/movie.spec.ts:72:64

If I tried <span><ng-container *ngFor="let a of arr">{{"&#9733;"}}</ng-container></span> the error says expected 4 span tags but got only 1 span tag.

Also I tried <span *ngFor="let a of arr" [innerHTML]="&#9733;"></span> this is also failing.

As the test cases are hidden, I am not able to guess correctly what is the correct solution for this.

Answer 1

Instead of each star wrapped in a span, your first solution will render:

<span>
  &#9733;
  &#9733;
  &#9733;
  &#9733;
<span>

Your second solution won't work because you need to pass [innerHTML] a string: [innerHTML]="'★'"

There is no need to use {{}} with an HTML entity. I would suggest the following solution as the simplest:

<span *ngFor="let a of arr">&#9733;</span>