app having error when starting

hi am having this error in my angular application

Uncaught Error: Template parse errors:
Can't bind to 'posts' since it isn't a known property of 'app-post-list'.
1. If 'app-post-list' is an Angular component and it has 'posts' input, then verify that it is part of this module.
2. If 'app-post-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("n>
<app-post-create (postCreated)="onPostAdded($event)"></app-post-create>
<app-post-list [ERROR ->][posts]="storedPosts"></app-post-list>
</main>

"): ng:///AppModule/AppComponent.html@4:19
at syntaxError (compiler.js:2175)
at TemplateParser.parse (compiler.js:11292)
at JitCompiler._parseTemplate (compiler.js:25837)
at JitCompiler._compileTemplate (compiler.js:25825)
at compiler.js:25769
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:25769)
at compiler.js:25682
at Object.then (compiler.js:2166)
at JitCompiler._compileModuleAndComponents (compiler.js:25681)
syntaxError @ compiler.js:2175
parse @ compiler.js:11292
_parseTemplate @ compiler.js:25837
_compileTemplate @ compiler.js:25825
(anonymous) @ compiler.js:25769
_compileComponents @ compiler.js:25769
(anonymous) @ compiler.js:25682
then @ compiler.js:2166
_compileModuleAndComponents @ compiler.js:25681
compileModuleAsync @ compiler.js:25643
compileModuleAsync @ platform-browser-dynamic.js:216
compileNgModuleFactory__PRE_R3__ @ core.js:33313
bootstrapModule @ core.js:33618
./src/main.ts @ main.ts:12
__webpack_require__ @ bootstrap:79
0 @ main.ts:13
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
2localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received.
client:52 [WDS] Live Reloading enabled.

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Subscription } from 'rxjs';
 
import { Post } from "../../post.model";
import { PostsService } from "../../posts.service";
 
@Component({
  selector: "app-post-list",
  templateUrl: "./post-list.component.html",
  styleUrls: ["./post-list.component.css"]
})
export class PostListComponent implements OnInit, OnDestroy {
  // posts = [
  //   { title: "First Post", content: "This is the first post's content" },
  //   { title: "Second Post", content: "This is the second post's content" },
  //   { title: "Third Post", content: "This is the third post's content" }
  // ];
  posts: Post[] = [];
  private postsSub: Subscription;
 
  constructor(public postsService: PostsService) {}
 
  ngOnInit() {
    this.posts = this.postsService.getPosts();
    this.postsSub = this.postsService.getPostUpdateListener()
      .subscribe((posts: Post[]) => {
        this.posts = posts;
      });
  }
 
  ngOnDestroy() {
    this.postsSub.unsubscribe();
  }
}
 ===
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import {
  MatInputModule,
  MatCardModule,
  MatButtonModule,
  MatToolbarModule,
  MatExpansionModule
} from "@angular/material";
 
import { AppComponent } from "./app.component";
import {PostCreateComponent} from './posts/posts_create/post-create-components';
import { HeaderComponent } from "./header/header.component";
import { PostListComponent } from './posts/posts_create/post-list/post-list.component';
 
@NgModule({
  declarations: [
    AppComponent,
    PostCreateComponent,
    HeaderComponent,
    PostListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule,
    MatToolbarModule,
    MatExpansionModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}