Here are the files related to the item:
And here is the component file:
Lastly, this is the data service file:
However, issues arise when testing the code with console log statements as it indicates that the data from the service is undefined.
import { Component, OnInit } from '@angular/core';
import { Item } from '../item';
import { DataService } from '../data.service';
@Component({
selector: 'app-shopping-item',
templateUrl: './shopping-item.component.html',
styleUrls: ['./shopping-item.component.css'],
providers: [DataService]
})
export class ShoppingItemComponent implements OnInit {
shoppingItemList: Item[] = [];
constructor(private dataservice: DataService){}
getItems(){
this.dataservice.getShoppingItems()
.subscribe(items =>{
this.shoppingItemList.push(items),
console.log('data from dataservice '+ this.shoppingItemList[0].itemName);
})
}
addItem(form: any){
console.log(form)
}
ngOnInit(): void {
this.getItems();
}
}