addIngredients(ingredients: Ingredient[] | undefined) {
    ingredients?.filter(item => {
      // @ts-ignore
      console.log(this.ingredients.lastIndexOf(item.name));
      // @ts-ignore
      if(this.ingredients.lastIndexOf(item.name.toString()) === -1)
      {
        this.ingredients.push(item);
      }
    });
}

When I add items to my first time, it works but if I add duplicate items, it continues to push items in my Array.

Ultimately I am trying to prevent duplicate items from being added and update the amount if it does exist in my array.

Ingredients is a model which has 2 properties (name, amount)

export class Ingredient {
  constructor(public name: string, public amount: number) {
  }
}


export class Recipe {
  public name!: string;
  public description!: string;
  public imagePath!: string;
  public ingredients: Ingredient[] = [];

  constructor(name: string, description: string, imagePath: string, ingredients: Ingredient[]) {
    this.name = name;
    this.description = description;
    this.imagePath = imagePath;
    this.ingredients = ingredients;
  }
}