How to start at a index but without missing any items in the array?

I am learning JS and have a task to complete which is quite confusing. The task is to giving a index to start from and include the remainders or the the items missing in the array, as well as to display them in angular. This is what i have

const arr = ["a", "b" ,"c" ,"d"]

const startIndex = 2:

let arr2 = arr.slice(startIndex, arr.length)

Output

["c","d"]

// a and b are ignore and don't see a way to display them accordingly

The tasks is to start let's say at index 2 through the last item and include items a and b which are the items missing when using slice method

Heres an example with your code above:

JS

const arr = ["a", "b", "c", "d"];
const startIndex = 2;
let arr2 = [...arr.slice(startIndex), ...arr.slice(0, startIndex)];
console.log(arr2);

The ... is the spread operator, it allows an iterable (like an array expression) to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected.

Angular Example:

<div *ngFor="let item of arr2">{{item}}</div>

You could use the original array copied twice:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const arr = ["a", "b", "c", "d"]
const startIndex = 2;

const result = [...arr, ...arr]
  .slice(startIndex, startIndex + arr.length);

console.log(result);

<!-- end snippet -->

Since I feel this is for educational purposes thought it would be nice to have something without any inbuilt operators. Here is an alternative approach to your case without any inbuilt operators in javascript.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function customSliceAndMoveItems(array, startIndex) {
  var result = [];
  
  
  for (var i = startIndex; i < array.length; i++) {
    result.push(array[i]);
  }
  
  
  for (var j = 0; j < startIndex; j++) {
    result.push(array[j]);
  }
  
  return result;
}

console.log(customSliceAndMoveItems(["a", "b", "c", "d"],2))

<!-- end snippet -->

In case considering the performance aspect you can optimize the above code while using the Array slice() operator and Array concat() operator.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function customSliceAndMoveItems(array, startIndex) {
  return array.slice(startIndex).concat(array.slice(0, startIndex));
}

console.log(customSliceAndMoveItems(["a", "b", "c", "d"], 2));

<!-- end snippet -->

When it comes to angular you can iterate it over the template directly as follows :

<h1 *ngFor="let item of getArray1(['a', 'b', 'c', 'd'], 2)">
  {{ item }}
</h1>

Please find the working stackblitz here.