Currently, I am working with Angular and attempting to create a webpage on my localhost. However, I am facing an issue where I am unable to use functions. I suspect it might be a path problem, even though I have correctly declared all the paths.
I spent about 4 hours searching online for a solution but couldn't find any relevant information addressing this particular issue.
In addition to the default components created when setting up the Angular project, I have also made two components myself:
post-create.component.html
post-create.component.ts
Both of these components are located in the following path from the app folder:
'./posts/posts-create/post-create.component.html'
'./posts/posts-create/post-create.component.ts'
I double-checked the names of the folders to ensure there are no spelling mistakes.
The code in 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';
}
}
The content in post-create.component.html is just some random text in an attempt to make it function, as shown below:
<h2> sup </h2>
The content of my app.component.html is:
<h1> Hello world </h1>
<textarea rows="6"></textarea>
<hr>
<button (click)="onAddPost()"> Save post </button>
<p>{{ newPost }}</p>
When I click the button, it should trigger the function "onAddPost()", however, it does not work and instead gives me this error message: ERROR TypeError: _co.onAddPost is not a function
I am unsure why this error is occurring. The content of my app.module.ts file is as follows:
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 { }
As you can see, I have imported
import { PostCreateComponent } from './posts/posts-create/post-create.component'This code is part of a tutorial video that I am following along with. If you are curious, the video link is provided here: https://www.youtube.com/watch?v=1tRLveSyNz8&fbclid=IwAR0k3FKxqbYVKuT3g2UgJVQWFW2xFXV8xmhzGbwqbyZ3ltWrBcVktYc38_I
Thank you in advance for any assistance or insights you may provide. I apologize for taking up your time, but despite my efforts to resolve this issue on my own, I seem to be unable to determine why the function is not working.