angular - Emit and Subscribe within Angular 9 Service don't work together

Question

I have service called shopping list service.

import { Ingredient } from './ingredient.model';

@Injectable({
  providedIn: 'root'
})

export class ShoppingListService {
  constructor() { }

  ingredients = [
    new Ingredient("Protein",40),
    new Ingredient("Carbs",10),
    new Ingredient("Vitamins",10)
  ];

  ingredientEmitter = new EventEmitter<any>();

  addIngredient(ingredient:Ingredient) {
    this.ingredients.push(ingredient);
  }

  addIngredientsFromRecipes(ingredients:Ingredient[]) {
    let array=[];
    for (let i=0;i<this.ingredients.length;i++) {
        array.push(this.ingredients[i]);
    }
    array.push(...ingredients);
    this.ingredientEmitter.emit(array);
    
  }
  
  provideIngredientList() {
    return this.ingredients;
  }
}

In the function addIngredientsFromRecipes() I „receive“ an Array of type Ingredient, which is different from the initial ingredients Array in the Service. The array I receive looks like this. (Running the first console.log in addIngredientsFromRecipes())

(2) [Ingredient, Ingredient]
0: Ingredient {name: "Ingredient 3", amount: 40}
1: Ingredient {name: "Ingredient 4", amount: 70}
length: 2
__proto__: Array(0)

In this function I also want to add the “received“ Ingredients Array to the initial ingredients Array of the service. This works because when I console.log it (second console.log in the function), it shows the initial Array with the extra Array.

(5) [Ingredient, Ingredient, Ingredient, Ingredient, Ingredient]
0: Ingredient {name: "Protein", amount: 40}
1: Ingredient {name: "Carbs", amount: 10}
2: Ingredient {name: "Vitamins", amount: 10}
3: Ingredient {name: "Ingredient 3", amount: 40}
4: Ingredient {name: "Ingredient 4", amount: 70}
length: 5
__proto__: Array(0)

The problem starts when I want to send this new Array to the Component which displays the Array via this.ingredientEmitter.emit(this.ingredients) in the function addIngredient(ingredient:Ingredient).

The HTML Template of the displaying component look like this:

<div class="container pt-5">
    <table class="table">
  <thead>
    <tr>
      <th scope="col">name</th>
      <th scope="col">amount</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let ingredient of ingredients">
        <td> {{ingredient.name}} </td>
        <td> {{ingredient.amount}} </td>
    </tr>
  </tbody>
</table>

The ts of the displaying component:

import { Component, OnInit,OnChanges } from '@angular/core';
import { ShoppingListService } from  '../shopping-list.service';
import {Ingredient} from '../ingredient.model';

@Component({
  selector: 'app-display-ingredients',
  templateUrl: './display-ingredients.component.html',
  styleUrls: ['./display-ingredients.component.css']
})
export class DisplayIngredientsComponent implements OnInit {
  ingredients:Ingredient[];

  constructor(private shoppingListService:ShoppingListService) {
   }


  ngOnInit(): void {
    this.ingredients = this.shoppingListService.provideIngredientList();

    this.shoppingListService.ingredientEmitter.subscribe((ingredients:any)=> {
      this.ingredients=ingredients;
    })}
    
  }

It seems that the subscription dosent seem to work for some reason. Can`t figure out why. Many thanks in advance.