Join Alexander Zanfir for an in-depth discussion in this video Show questions component in Angular, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Narrator] Let's begin by creating a component to show a list of all our questions that we have on our back end, eventually associating them with the quiz. Let's head over to our front end project. Let's add a new component in our app folder. We'll call it questions.component.ts. We'll open up our question.component and select everything inside, copy it, and paste it in our questions component as a template. Then we'll rename the class from question component to questions component on line eight.
Then let's update our template URL on line six. Instead of question.component.html we'll create a file called questions.component.html. Let's save that and create the file. Then finally we'll rename our selector from question to questions. Now let's open up our question HTML. We'll copy that as a template and paste it inside our questions component HTML.
Then let's get rid of the form between line three and line 19. And then let's get rid of the button on line six. Now we have our empty MD card, just as a placeholder inside the card content. I'll add questions list. Now that we have our new questions component let's register it with our app module. So below line nine I'll add in port questions component from questions.component, and let's add it our declarations list on line 14.
Next let's go over to our app component.ts and right below the question element we'll add our questions element. Let's save that and give it a try. Now we can see we're able to add a new question at the top and below that we will eventually be able to see all of the questions that have already been added, and in order to display the questions list we'll go over to Angular material components and let's scroll down to list, and we'll be using the list component.
So let's go over to API and make sure we import the list module. Let's open up our app module TS, add that to the list on line five, and we'll also add it to the imports list. Now back in questions HTML let's get rid of the placeholder and add a list. We'll use MD-list. At this point we need a list of questions.
So we'll need to do several things. We'll need to go in our API service and create a get questions function and then we'll need to go in our back end and inside our get function we need to return our actual list of questions instead of this placeholder. So we'll start by adding the get questions function to our service and we'll just copy our post question function as a template. So select everything between line nine and 13 and paste it above.
And instead of post question we'll call it get question. Then on line 10 instead of HTTP post we'll change that to .get. We also won't need to pass in an object. So we'll take that out as the second parameter. And then instead of subscribing to it inside our get question function I'll take out the subscribe and I'll return the observable that HTTP get gives us.
That way we can subscribe to it wherever we call get question. So let's go to our questions component and we'll subscribe to it here, so that we can get the results in our components and display them. So we'll need to call our API service in here. We could do it inside the constructor but that might slow things down. So we'll use a function called ngOnInit and this will be called by Angular once the component has initialized.
Inside here we can call this.api.getquestion and I'll go back to the service and rename that to questions. Then I'll call .subscribe. I'll get the response and I'll simply console log it. Then back in our service I'll make sure to take out question in the parameters list.
Let's save this and give it a try in our app. So make sure you're back end is running and then inside our app, and if we take a look at our app inside the network tab in our questions request we can see the response is our placeholder questions. So now that we're getting our placeholder questions let's go back to our back end and modify it so we get our actual questions. So inside our get function call on line 22 I'll return context.questions.
Let's save that and give it another try. Once our back end loads, let's refresh our page and check our questions call. We can see that we're getting no questions at this point, so let's add one. And we had a break point in our save changes. Let's take that out and hit continue, and then let's refresh. Now let's go over to our questions and we can see we're getting the one question we just added.
Now that we're getting our questions inside our components let's add the materials list with all of the questions. So back in our front end inside the questions component TS inside our subscribe on line 17 instead of console logging it let's save the questions. So we'll change it to this.questions equals response and then we'll need to create a questions list inside our class. So below question we'll add our questions list.
Now let's go our to our questions HTML and populate the list. On line three in our MD-list we'll add an NG for and we'll for loop through all of the questions by using let question of questions. Then we'll add in an MD-list-item element and inside we'll place question.text and I'll place it in between double curly braces so that we get the value of question.text displayed.
Let's save that. Now let's give it a try. And we can see it's already displaying our first question. Let's add a new question. And then, let's refresh. Then you can see that both questions are now showing. Next we'll focus on making these questions clickable so that we can go into an individual question component and edit its values.
- 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