Join Alexander Zanfir for an in-depth discussion in this video Edit question component in Angular, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] In this video, we'll modify our question component so that it changes to an edit question mode once we select an existing question from our question's list. So if we take a look at our app, we'll make each of these questions clickable and when we click on one, it will update all of the inputs with the existing values of the question selected. And then instead of posts, we'll see an edit button instead. We'll also be modifying our API service to work with an observable to allow us to communicate between two components.
Since our question component is separate from our question's component. So let's open up our API service to get started. The first thing we'll do is create an observable subject. So above our constructor, let's add a private selected question property to our class and we'll set it to new subject of type any and we'll need to import subject from rxjs in order to have access to that.
And rxjs is the library that Angular uses. Which gives it access to observables and the subject in this case. If you're not familiar with the concept of observables, they're similar to promises with some added functionality and some slight differences and we'll get a better sense of how they work once we see how subject differs from the traditional observer that we've been using in our http requests such as on line 16 with the subscribe method.
In this case, we're subscribing to an observable and waiting for an event or action to occur at which point our callback is executed and in this case we're just console logging the response. Whereas on line 12, we're just returning the observable without executing it and letting the component that we'll call get questions executed. Now that we have our subject, let's create an observable from it. We'll add another property called question selected and we'll set it to this.selectedQuestion .asObservable.
So our selected question property will hold reference to the question that we clicked on and selected. So back in our app, when I click on a question, it will set the reference and then we create an observable just like we have in our http get request or post request that components can then subscribe to and get notified of when a question has been clicked on or selected. Next, we need a function that will actually set questions selected.
So let's go below post question and add that function. So we'll call it select question and it'll take in a question and then we'll call this .selectedQuestion and since it's a subject, we'll use .next to set the value to question and trigger that event. And whoever is subscribed to the question selected observable will get notified when we call next with the value that we passed through.
Next, what we need to do is make our questions in the question's component clickable. So let's open up our question's component html and then go to our list. Inside the list item, let's add that click binding. And we'll set it to api.selectQuestion and then we'll pass on the question and since this is an ng4, it will do an appropriate click binding for every corresponding question in the list and then before we try it out, the last thing we need to do is go to our question component, create an ngOnInit and we'll do that below the constructor.
And then we need to subscribe to our selected question observable. So we'll call this.api.questionSelected .subscribe And we'll get back a question and we'll simply set it to this.question. So essentially when a question is clicked on, we'll be notified over here in our subscribe and then we'll take the value of that question that was clicked and set it to our component's question property.
Let's give that a try. And we can see it's working, but these list items don't look very clickable. Since we're not getting the expected mouse icon, let's fix that. Let's open up our styles.css and add a click style. I'll call it clickLink and I'll set it to cursor pointer. Save that, close it out, and then let's go back to our list and our question's component and add that.
So on line four in front of our click binding, let's add class and set it to clickLink. Save that and give it a try and that looks much better. Notice though that we don't have a clear distinction yet between being inside edit mode or new question mode so what I'd like to do is add a title to this card that lets us know. So back in our editor, let's open up our question component html.
And above card content, let's add a new element called md card-title. And in here I'll add a span and I'll put in edit question for the text. And now let's use an ngif. Now, a nice little trick we can do is check whether our question object contains an ID. If it does, that means it's already been through the entity framework save process and an ID has been generated.
So we know that we're editing an question if it has an ID. If it doesn't have an ID, that means it's a new question. In that case, we should be in new question mode. So let's check for question.id. Then let's copy this, paste it below and if there is no question ID, that means we're in new question mode. Let's save that. As you can see by default, there is no question ID and we're in new question mode. When I click on a question, we have a question ID and we're in edit question mode.
The last few things I'd like to do is modify our button or add a new button depending on the mode we're in. So let's scroll down to our button on line 26. And we'll have the pulse button if we're not in edit mode so let's go up and copy the ngif that checks that we don't have an ID and use it in front of our click binding on line 26. Then let's copy this question, paste it below, and then we'll modify the first one and if we are in edit mode, we'll change the title to edit.
And we don't yet have an edit function so I'll just pass a no for now. Let's give that a try. We can see the pulse button and the new question title. Let's click a question and now we can hit edit instead, but say we're inside our edit question mode. How can we go back into a new question mode without having to refresh the page? Let's add a new button inside edit question mode that allows us to create a new question.
So back inside here. Let's copy our edit question button and paste it below. Then let's call it new. And all we will do is simply set question to an empty object. Let's save that and give a try. I'll click on a question. We see the new button and when I hit it, we get rid of that question ID and any other values inside the object and we're back in our new question mode.
Next, let's create the front end API service that allows us to edit or put our changes onto an existing question.
- 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