How to use splice in Angular

Angular is a front-end framework used to develop web applications. Angular uses the Javascript language as a development tool and converts the code into a web application. If a button click enables a user to splice an array, we use the onClick function of that button and write our code in that function.

What does splice do?

splice is a function that splices an array. Splicing an array means that it divides the array into two portions and takes these three types of parameters:

  • starting index of an array
  • the number of elements to remove
  • elements to be added
array.splice(startIndex, numberOfElementsToRemove, numberToBeAdded).

The last parameter is optional

Keep in mind that we can use array.splice to actually add, remove, or replace elements in an array.

Splicing an array to add elements in that array

The following function is an onClick function in Angular that is used to add elements in an array after the third index:

function onClickAdd(array) {
//starting index 3, 0 elements to remove and add 4 in the array
array.splice(3, 0, 4);
return array;
}
var array = [1, 2, 3];
onClickAdd(array);
console.log(array);

Splicing an array to remove elements in that array

The following function is an onClick function in Angular that is used to remove elements in an array after the first index:

function onClickRemove(array) {
//starting index 1, 2 elements to remove and add nothing in the array
array.splice(1, 2);
return array;
}
var array = [1, 2, 3];
onClickRemove(array);
console.log(array);

Splicing an array to replace elements in that array

The following function is an onClick function in Angular that is used to replace elements in an array after the first index:

function onClickReplace(array) {
//starting index 1, 2 elements to remove and add 11 and 111 in the array
array.splice(1, 2, 11, 111);
return array;
}
var array = [1, 2, 3];
onClickReplace(array);
console.log(array);

Free Resources