perform input and output in In Project customer component and Grid component

Customer.model.ts

   export class Customer{
        CustomerCode:string="";
        CustomerName:string="";
        CustomerAmount:number=0;
         
    }


    **customer.component.ts**

 import { Component, InjectionToken, Injector } from '@angular/core'
    import { Customer } from './Customer.model'
    import { BaseLogger } from '../Utility/CustomerApp.logger'
    
    @Component({
        selector: 'cust-app',
        templateUrl: './customer.view.html',
        styleUrls: ['./customer.view.css']
    })
    export class CustomerComponent {
        customerModel:Customer = new Customer();
        customerModels:Array<Customer> = new Array<Customer>();
    
        loggerObj: BaseLogger = null;
        constructor(_logger:BaseLogger){
         
            this.loggerObj=_logger;
            this.loggerObj.Log();
        }
        // i got error in SeleCustomer()
        SelectCustomer(_selected:Customer){
            this.customerModel = _selected;
          }
    }


    **customer.view.html**

     // Note: [grid-columns] colName got problem
    
      <grid-ui [grid-columns]="[{'colName':'CustomerCode'},{'colName':'CustomerName'}, 
         {'colName':'CustomerAmount'}]" 
        [grid-data]="customerModels"
        (grid-selected)="SelectCustomer($event)"
      ></grid-ui>


    **Grid.component.ts**

     import {Component,
            Input,
            Output,
            EventEmitter} from "@angular/core"
        
        @Component({
            selector: "grid-ui",
            templateUrl : "./Grid.view.html"
        })
        export class GridComponent{
            // for the column names
            gridColumns: Array<Object> = new Array<Object>();
            // grid data 
            gridData: Array<Object> = new Array<Object>();
             // Note: gridColumn store in array object
            @Input("grid-columns")
            set setGridColumns(_gridColumns:Array<Object>){
               this.gridColumns = _gridColumns;     
            }
            @Input("grid-data")
            set setGridData(_gridData:Array<Object>){
                this.gridData = _gridData;     
             }
             
             @Output("grid-selected")
             eventemitter: EventEmitter<Object> = 
             new EventEmitter<Object>();
        
             SelectGrid(_selected:Object){
                 this.eventemitter.emit(_selected);
             }
             
        }


    **Grid.view.html**

   

     <table>   
            <tr>
                   <td *ngFor="let col of gridColumns">
                       {{col.colName}}
                   </td>
            </tr>
            <tr *ngFor="let colObj of gridData">
                <td *ngFor="let col of gridColumns">
                    {{colObj[col.colName]}} // show Error Property 'colName' does not exist on type 'Object'
                </td>
                <td>
                    <a (click)="SelectGrid(colObj)" routerLink="'/Customer/Add'">select</a>
                </td>
            </tr>
           </table>



     **package.json**


  

      {
          "name": "angular11project",
          "version": "0.0.0",
          "scripts": {
            "ng": "ng",
            "start": "ng serve",
            "build": "ng build",
            "test": "ng test",
            "lint": "ng lint",
            "e2e": "ng e2e"
          },
          "private": true,
          "dependencies": {
            "@angular/animations": "~11.0.4",
            "@angular/common": "~11.0.4",
            "@angular/compiler": "~11.0.4",
            "@angular/core": "~11.0.4",
            "@angular/forms": "~11.0.4",
            "@angular/platform-browser": "~11.0.4",
            "@angular/platform-browser-dynamic": "~11.0.4",
            "@angular/router": "~11.0.4",
            "rxjs": "~6.6.0",
            "tslib": "^2.0.0",
            "zone.js": "~0.10.2"
          },
          "devDependencies": {
            "@angular-devkit/build-angular": "~0.1100.4",
            "@angular/cli": "~11.0.4",
            "@angular/compiler-cli": "~11.0.4",
            "@types/jasmine": "~3.6.0",
            "@types/node": "^12.11.1",
            "codelyzer": "^6.0.0",
            "jasmine-core": "~3.6.0",
            "jasmine-spec-reporter": "~5.0.0",
            "karma": "~5.1.0",
            "karma-chrome-launcher": "~3.1.0",
            "karma-coverage": "~2.0.3",
            "karma-jasmine": "~4.0.0",
            "karma-jasmine-html-reporter": "^1.5.0",
            "protractor": "~7.0.0",
            "ts-node": "~8.3.0",
            "tslint": "~6.1.0",
            "typescript": "~4.0.2"
          }
        }

  

OutPut :


Error:

Argument of type 'Object' is not assignable to parameter of type 'Customer'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Type 'Object' is missing the following properties from type 'Customer': CustomerCode, CustomerName, CustomerAmount, formCustomerGroup

 (grid-selected)="SelectCustomer($event)"
                                   ~~~~~~

src/app/customer/customer.component.ts templateUrl: './customer.view.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component CustomerComponent. src/app/Utility/Grid.view.html

• error TS2339: Property 'colName' does not exist on type 'Object'.

           {{col.colName}}
                 ~~~~~~~
  

src/app/Utility/Grid.component.ts templateUrl : "./Grid.view.html" ~~~~~~~~~~~~~~~~~~ Error occurs in the template of component GridComponent. src/app/Utility/Grid.view.html:9:14 - error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'Object'.

         {{colObj[col.colName]}}
           ~~~~~~~~~~~~~~~~~~~

src/app/Utility/Grid.component.ts templateUrl : "./Grid.view.html" ~~~~~~~~~~~~~~~~~~ Error occurs in the template of component GridComponent. src/app/Utility/Grid.view.html:9:25 - error TS2339: Property 'colName' does not exist on type 'Object'.

        {{colObj[col.colName]}}
                      ~~~~~~~

src/app/Utility/Grid.component.ts templateUrl : "./Grid.view.html" ~~~~~~~~~~~~~~~~~~ Error occurs in the template of component GridComponent.