Join Alexander Zanfir for an in-depth discussion in this video New question functionality, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] In this video, we'll add some functionality to our question form. We'll begin by adding a button and binding to it's click event. So inside our editor, in our question component, we'll load the html and we'll add a button. We could add the button to our form element, but the card has an actions element that can be used specifically for buttons, so we'll use that. If we go back to the Angular Materials Components under Card and Examples, we can see this example with the main content and then buttons at the bottom.
If we look at the code, we can see that the buttons are placed inside an md-card actions element and the content is placed an md-card content element. So let's replicate that in ours. We'll put our form inside an md-card-content element and then below that we'll add an md-card-actions. Then let's add our button.
I'll call it POST, since we'll be posting a new question. Let's take a look. Since the button won't be in our form element, we won't bind to it through the submit action, but instead we'll bind through the click action. And we'll set it to a function that does not yet exist, we'll call it post. Let's go ahead and create that function.
Inside our class, we'll create our post function with a placeholder console.log. Let's give that a try. And we can see our test in our console. The next thing we'll need to do is get the value from our question input. And to do that, we'll use the ng model binding, so let's go over to line five and add that.
And we'll set it to question. Now we can simply pass in question into our post function and back in our question component, we'll take in the value question. And let's output that to the console.log. Let's give it a try. We can see we're getting an error. That ng model is not a known property of input. To fix that, we'll need to add the forms module from Angular to our app module.
So let's load up our app module. And let's import that below line four. And we'll get it from @angular/forms then lets add it to our imports list. And save that. Once it loads, we're still getting an error.
That if we're using ng model, we must have a name attribute set. So let's go back and set that. Back in our question component html, let's add a name attribute and we'll set it to question as well. Now we can see it's running without errors, so let's try placing a value inside our question input and hitting post. And we can see we're getting the expected value. So we've binded to the click even for post and we're getting the value from our question input.
We're now ready to send the question over to the backend when a user fills in the input and hits post. And to do that we'd use an Angular service, let's take a look at that next.
- Creating and configuring the Angular project
- Creating forms with Angular
- Creating get and post routes in an ASP.NET Core controller
- Updating Angular service to post to API
- Persistence with Entity Framework
- Displaying and editing data in Angular with ASP.NET Core
- Navigating to different views in Angular
- Associations between entities with Angular and Entity Framework
- Setting up Identity Framework