How do I insert an element at the first position in an Angular array?

In Angular, you can insert an element at the first position of an array using the unshift() method. This method adds one or more elements to the beginning of an array and returns the new length of the array. Here's how you can do it:

Using the `unshift()` Method:

The unshift() method is the most straightforward way to add an element at the beginning of an array. It modifies the original array.

Example:

Let's say you have an array of numbers and you want to add a new number at the beginning:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>Array: </p>`,
})
export class ExampleComponent {
  numbers: number[] = [2, 3, 4, 5];

  constructor() {
    this.insertAtBeginning(1);
  }

  insertAtBeginning(newNumber: number): void {
    this.numbers.unshift(newNumber);
  }
}

Explanation:

1. We have an Angular component called ExampleComponent.

2. The numbers property is initialized with an array of numbers: [2, 3, 4, 5].

3. In the constructor, we call the insertAtBeginning() method with the new number 1.

4. The insertAtBeginning() method uses this.numbers.unshift(newNumber) to add the new number at the beginning of the array.

5. The template displays the updated array.

Important Considerations:

- The unshift() method modifies the original array. If you need to keep the original array unchanged, you should create a copy of the array before using unshift(). You can do this using the spread operator (...) or the slice() method.

- For example, to create a new array with the element inserted at the beginning without modifying the original array:

  insertAtBeginning(newNumber: number): void {
    this.numbers = [newNumber, ...this.numbers];
  }


By using the unshift() method or the spread operator, you can easily insert an element at the first position of an array in Angular. Choose the method that best suits your needs based on whether you need to modify the original array or create a new one.

Learn more about this