Angular child component console is not working – Javascript

I have created an angular application using angular 14. The folder structure looks like:

>src
    >app
        |_> app-routing.module.ts
        |_>app.component.html
        |_>app.component.ts
        |_>app.module.ts
    >components
        >home
            |_>home.component.html
            |_>home.component.ts
            |_>home.module.ts
        >shared
            >components
            |_>shared.module.ts

Here is the source code:
-app.module:

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        FormsModule,
        AppRoutingModule,
        HttpClientModule,
        SharedModule,
        DataGridModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

-app.component.html:

<button type="button" routerLink="">Home</button>
<router-outlet></router-outlet>

-app.component.ts:

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

-app.routing.module:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [{
    path: '',
    pathMatch: 'full',
    loadChildren: () => import('./components/home/home.module').then(m => m.HomeModule)
}];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

-home.component.html:

<div>Home Component</div>
<div>
    <app-grid [dataGrid]="dataGrid"></app-grid>
</div>

-shared.module.ts:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { DataGridComponent } from './components/grid/grid.component';

@NgModule({
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    declarations: [GridComponent],
    imports: [
        CommonModule,
        BrowserModule
    ],
    exports: [
        CommonModule,
        BrowserModule,
        GridComponent
    ],
})
export class SharedModule {}

-grid.component.ts:

import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: 'app-grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.css']
})
export class GridComponent implements OnInit{
    @Input() dataGrid={};

    ngOnInit(): void{
        debugger;
        console.log(this.dataGrid);
    }
}

I have created shared.module.ts to share grid component into html. However grid innerhtml is not showing inside home html.

Can someone help? I am still new to Angular