Join Alexander Zanfir for an in-depth discussion in this video Navigate between posting and displaying questions, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] In this video, we will use an angular materials toolbar as a navigation bar to allow us to easily navigate to different parts of our app. So under the components section of the website, under API, we see that we need to add our toolbar module to our app module, so let's start with that. So I'll open up the app module and add it on line five to the existing list. And at this point, it's getting quite big, so I'm going to stack them vertically.
Let's save that and close it out. The next thing I'll do is create a new file in our app folder for our nav component. Then I'll copy our app component as a template and paste it in. I'll change the selector to nav and I'll empty out the template for now, and then I'll change the class to nav component. Let's go ahead and add this to our app module. So below line 19, I'll add import NavComponent and then let's add it to our declarations.
Now let's go back to our nav component and start working out the template. I'll require a multi-line string so I'll use two back ticks. And I'll start by creating the md toolbar element. And let's start with the button. And I'll just call it quiz since our app will be called Quiz and this button will just take us to the root of our app, so I'll use router link and set it to just the slash.
And let's create two more buttons, so I'll copy this and paste it below twice. First one will be called question and the second will be called question list. And let's change the router link to question and questions. Let's save that and then let's go to our app component and add our nav component to the front. Let's save that. But before we try it out, I neglected to add the md toolbar module to the imports list, so let's do that at the bottom.
Let's save that and give it a try. So if we click on our questions button, we can see it's taken us to the questions component, the questions list and then back home. So at this point we're able to create, edit and list our different questions, but we have no functionality yet for adding a quiz and a question to a quiz, so let's focus on that next.
Released
12/5/2017- 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
Share this video
Embed this video
Video: Navigate between posting and displaying questions