The below code is not running in Angular 11.2.12. where as it is working in angular 6.0.3

product.component.ts Component class

 import { Component, OnInit } from '@angular/core';
   @Component({
     selector: 'app-product',
     templateUrl: './product.component.html',
     styleUrls: ['./product.component.css']
   })

    export class ProductComponent implements OnInit {

     products:Object[];
     constructor() {
     this.products = [
        {
          id:"1",
          name:"Mac Book Pro"
        },
        {
          id:"2",
          name:"Iphone"
        }

    ];
   }

     public getProducts(){
      return this.products;
     }
   ngOnInit():void {
   }

 }

product.component.html

    Product Details:
   <div *ngFor="let product of products">
    <h1>{{product.id}}</h1>
    <h1>{{product.name}}</h1>
   </div>

When I am running this I am seeing error message below

Error: src/app/product/product.component.html:3:19 - error TS2339: Property 'id' does not exist on type 'Object'.

3

{{product.id}}

src/app/product/product.component.ts:5:16 5 templateUrl: './product.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component ProductComponent.

Error: src/app/product/product.component.html:4:19 - error TS2339: Property 'name' does not exist on type 'Object'.

4

{{product.name}}

src/app/product/product.component.ts:5:16 5 templateUrl: './product.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component ProductComponent.

I tried <div *ngFor="let product of getProducts()">