Typescript - Conditionally create duplicate elements - html

Question

I have a variable which users of my application can modify, say:
let myValue = 3;
In my html I wish to create as many duplicates of an element as the value of the variable is.
In my case, myValue is 3, then we create the div element 3 times.
<div>I am a duplicate.</div>
<div>I am a duplicate.</div>
<div>I am a duplicate.</div>
myValue can be a higher or lower number as well. Whatever it is, I would like to have that many duplicates of my element. How can I achieve this?
P.S. I am still new to Angular and Typescript so please don't go hard on me if this is a rather simple question.

Answer 1

// creates an array in TS file based on myValue
duplicates = Array(myValue).fill(null).map( (x,index) => index );
// use ngFor in HTML
<div ngFor="let duplicate of duplicates">
<div>I am a duplicate. {{ duplicate }}</div>
</div>

Answer 2

This can be done using the Iterator Protocol.
HTML
<ol>
<li *ngFor="let i of value">{{ i }}</li>
</ol>
TypeScript
export class AppComponent {
title = 'app';
_value = 3;
get value(){
let iterable = {
length: this._value,
index: 0,
next: () => {
if (iterable.index < iterable.length) {
return {value: iterable.index++, done: false};
} else {
iterable.index = 0;
return {done: true};
}
},
[Symbol.iterator]: function() { return this }
};
return iterable;
}
}