How do i make a *ngFor display randomly?

Question

So I am making an application that require me to display the elements in random order, but because of the nature of the application I am not allowed to change the ngFor. So how do I make a ngFor display its content randomly?

You mean you can not change HTML code but you can change the array that it is targeting? — palaѕн, Mar 31 '20 at 13:04
Randomize the array before displaying it: https://stackoverflow.com/a/2450976/6513921 — ruth, Mar 31 '20 at 13:06

score 1 · Answer 1 · answered Mar 31 '20 at 13:09

1

You can try something like this

<div *ngFor="let element of elements; let i= index">
    <div *ngIf="(i+ 1) % number == 0">
       {{ element }}
     </div>
</div>

In typescript you can add

number = Math.floor(Math.random() * 10) + 1

answered Mar 31 '20 at 13:09

Bozhinovski

2,496
3
20
38

score 1 · Answer 2 · answered Mar 31 '20 at 13:20

why don't you change indexing in ts, I mead the element on which you are applying randomization

Like

Consider elem is original Array

const newElemArr = [];

getRandomElem() => {
    const pushElem(elem[getRandomValue(0, elem.length)]);
    newElemArr.push(pushElem);
    elem.splice(elem.indexOf(pushElem, 1);
    if (elem.length === 1) {
        newElemArr.push(pushElem);
    } else {
         getRandomElem();
    }
}


getRandomValue(min, max) { // min and max included 
     return Math.floor(Math.random() * (max - min + 1) + min);
}

Here what I am doing is recursively generating random value, get value of that index from original array and push it to new array.

So new array will always have random values.

How do i make a *ngFor display randomly?

2 Answers2