Currently learning Angular and Typescript but encountering an error. It seems to be related to specifying the type, but I'm unsure of the exact issue. Still new at this, so any guidance is appreciated!
src/app/shopping-list-new/shopping-edit/shopping-edit.component.ts:24:31 - error TS2345: Argument of type 'Ingredient' is not assignable to parameter of type '{ Ingredient: any; }'.
Property 'Ingredient' is missing in type 'Ingredient' but required in type '{ Ingredient: any; }'.
The code for the ingredients page is as follows:
export class Ingredient {
constructor( public name: string, public amount: number) {
}
}
The code that triggers the error looks like this:
import { Component, OnInit, ElementRef, ViewChild, EventEmitter, Output, } from '@angular/core';
import { Ingredient } from '../../shared/ingredient.model';
@Component({
selector: 'app-shopping-edit',
templateUrl: './shopping-edit.component.html',
styleUrls: ['./shopping-edit.component.css']
})
export class ShoppingEditComponent implements OnInit {
@ViewChild('nameInput') nameInputRef: ElementRef;
@ViewChild('amountInput') amountInputRef: ElementRef;
@Output() ingredientAdded = new EventEmitter<{Ingredient: any}>();
constructor() { }
ngOnInit(): void {
}
onAddItem() {
const ingName = this.nameInputRef.nativeElement.value;
const ingAmount = this.amountInputRef.nativeElement.value;
const newIngredient = new Ingredient(ingName, ingAmount);
this.ingredientAdded.emit(newIngredient)
}
}