TypeError: _co.function is not a function

I am working with angular and trying to make a webpage on my local host, but I cannot use functions. I assume it is a path issue, but I have declared all my paths correctly.

Spent 4 hours trying to google the answer up, didn't find anything answering this issue.

I have created 2 components myself, outside of what was made by defualt when I created the angular project:

post-create.component.html

post-create.component.ts

From the app folder, they are both located at:

'./posts/posts-create/post-create.component.html'
'./posts/posts-create/post-create.component.ts'

I have been an copy pasted the name of the folders to make sure it isn't a miss-spell

post-create.component.ts looks like this:

import { Component } from '@angular/core';
@Component({
  selector: 'app-post-create',
  templateUrl: './post-create.component.html'
})
export class PostCreateComponent{
  newPost = '';
  onAddPost(){
    this.newPost = 'The users posts';
  }
}

post-create.component.html is just filled with something random to try to make it work, but looks like this:

<h2> sup </h2>

My app.component.html is:

<h1> Hello world </h1>
<textarea rows="6"></textarea>
<hr>
<button (click)="onAddPost()"> Save post </button>
<p>{{ newPost }}</p>

This should, when clicking the button call the function "onAddPost()" but does not. It gives this error:
ERROR TypeError: _co.onAddPost is not a function

and I have no clue why. My app.module.ts file is like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PostCreateComponent } from './posts/posts-create/post-create.component'
@NgModule({
  declarations: [
    AppComponent,
    PostCreateComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

So as you can see, I have imported
import { PostCreateComponent } from './posts/posts-create/post-create.component'
And added it to the decleraction

The code is a part of a video that I am watching and just coding along with to get into it. If you wounder it is from this video:
https://www.youtube.com/watch?v=1tRLveSyNz8&fbclid=IwAR0k3FKxqbYVKuT3g2UgJVQWFW2xFXV8xmhzGbwqbyZ3ltWrBcVktYc38_I

Thank you for your answers in advance, sorry for taking up your time, I have tried to fix this myself but just can't seem to find out why it won't let me use the function

Watch again the video at 1:02:00 :

This following content is related to post-create.component.ts (not to app.component.ts) :

<h1> Hello world </h1>
<textarea rows="6"></textarea>
<hr>
<button (click)="onAddPost()"> Save post </button>
<p>{{ newPost }}</p>