title: TypeError: _co.function is not a function
body: <p>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.</p>
  
  <p>Spent 4 hours trying to google the answer up, didn't find anything answering this issue.</p>
  
  <p>I have created 2 components myself, outside of what was made by defualt when I created the angular project:</p>
  
  <p>post-create.component.html</p>
  
  <p>post-create.component.ts</p>
  
  <p>From the app folder, they are both located at:</p>
  
  <pre><code>'./posts/posts-create/post-create.component.html'
  './posts/posts-create/post-create.component.ts'
  </code></pre>
  
  <p>I have been an copy pasted the name of the folders to make sure it isn't a miss-spell </p>
  
  <p>post-create.component.ts looks like this:</p>
  
  <pre><code>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';
    }
  }
  </code></pre>
  
  <p>post-create.component.html is just filled with something random to try to make it work, but looks like this:</p>
  
  <pre><code>&lt;h2&gt; sup &lt;/h2&gt;
  </code></pre>
  
  <p>My app.component.html is:</p>
  
  <pre><code>&lt;h1&gt; Hello world &lt;/h1&gt;
  &lt;textarea rows="6"&gt;&lt;/textarea&gt;
  &lt;hr&gt;
  &lt;button (click)="onAddPost()"&gt; Save post &lt;/button&gt;
  &lt;p&gt;{{ newPost }}&lt;/p&gt;
  </code></pre>
  
  <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</p>
  
  <p>and I have no clue why. My app.module.ts file is like this:</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>So as you can see, I have imported
  <code>import { PostCreateComponent } from './posts/posts-create/post-create.component'</code>
  And added it to the decleraction</p>
  
  <p>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:
  <a href="https://www.youtube.com/watch?v=1tRLveSyNz8&amp;fbclid=IwAR0k3FKxqbYVKuT3g2UgJVQWFW2xFXV8xmhzGbwqbyZ3ltWrBcVktYc38_I" rel="nofollow noreferrer">https://www.youtube.com/watch?v=1tRLveSyNz8&amp;fbclid=IwAR0k3FKxqbYVKuT3g2UgJVQWFW2xFXV8xmhzGbwqbyZ3ltWrBcVktYc38_I</a></p>
  
  <p>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</p>