Encountering difficulties with utilizing nested property interface.
//Food Interface (food.interface.ts)//
export interface Food {
name: string;
quantity?: string;
description?: string;
nutrients?: {
calories?: number;
protein?: number;
carbs?: number;
fats?: number;
};
}
food.component.html
<input type="number" placeholder="Calories" [(ngModel)]="food.nutrients.calories" name="foodCalories" #calories="ngModel">
food.component.ts
import {Food} from '../../models/food/food.interface';
export class FoodComponent {
food = {} as Food;
constructor() {}
}
While accessing the first level properties works correctly, attempting to access the nutrients.(any property) results in 'undefined'.