Angular, looping through nested components

I am using Angular 6, trying to write out hardcoded data using nested components and a ngloop, but it wont let me.

I have a component Post:

export class Post {
    title: string;
    constructor(title: string) {
        this.title = title;
    }
}

I create a list of Posts(with dummy data) in my PostListComponent:

export class PostListComponent implements OnInit {

posts: Post[];

constructor() {
  this.posts = [
    new Post("title1"),
    new Post("title2"),
    new Post("title3"),
  ];
}

and the html for this:

<div class="card-container">
      <mat-card class="example-card" 
      *ngFor="let postToDisplay of posts">

        <display-post [post]="postToDisplay">
        </display-post>

      </mat-card>
    </div>
</div>

now.. I want to deliver the postToDisplay variable from the loop to the display-post component where i try to write this out:

{{ post.title }}

and the typescript, very simple with just an input:

export class DisplayPostComponent implements OnInit {

    @Input() post: Post;
}

I am receiving this error message in the developer console:

Uncaught Error: Template parse errors: Can't bind to 'post' since it isn't a known property of 'display-post'. 1. If 'display-post' is an Angular component and it has 'post' input, then verify that it is part of this module.