demo.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
product : Object[]
constructor() {
this.product=[
{
id: "1",
name :"tiger"
},
{
id: "2",
name :"loin"
}
];
}
public getProducts(){
this.product;
}
ngOnInit() {
}
}
demo.coponent.ts
<h1>
<div *ngFor="let product of getProducts()">
<p>{{product.id}}</p>
<p>{{product.name}}</p>
</div>
</h1>
I am a beginner in Angular and I am facing an issue with the HTML code. I am unable to retrieve data from the function and I am getting error messages in the console.
However, when using the product variable directly, I am able to display the data:
<div *ngFor="let product of product">
<h1>{{product.id}}</h1>
<h1>{{product.name}}</h1>
</div>