Join Alexander Zanfir for an in-depth discussion in this video New question layout, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] In this video, we will be creating a new question form. Since we will be designing a layout, we can use a package to help us called Angular Materials. Material is made by the Angular team and you might be wondering why I choose not to use Bootstrap. I prefer it since it's made by the Angular team to specifically work with Angular, and it's fast and not too verbose. Over the past year, Angular Material has gone through many changes and updates. Some of them introducing breaking changes. So I highly suggest that as we install Angular Material and set it up, that you follow the Getting started instructions found on material.angular.io.
We will go through the set up instructions step by step, but if you're instructions are different because they are more updated, I suggest following what you see on your screen. So to begin, as usual, we'll use npm install. So let's go over to our terminal, and after copying the install command, we'll paste that in. And I'll create the new terminal, so that we can leave the Angular server running in the first terminal. I'll paste that in, and let's run it.
Back in the instructions, let's carry on to step two. Let's install Angular Animations. And then, we need to import it inside our NgModule. So I'll copy the import line and go into our app.module and I'll paste it in after the second import. Then we need to add it to our imports list.
So beside BrowserModule on line 13, I'll add that and I'll save the changes. Just to be safe as we go along, you can check your app to make sure that there's no errors inside the console. This way we know we can carry on through the next steps. Let's go down to step three. With the new version of Angular Material, we need to import each component module that we wish to use. So in this example, we're importing button module and checkbox module.
So I'll copy this line. Back inside our NgModule, let's paste that below our third import, on line four. And I'll get rid of our MdCheckboxModule, since we won't need that. And then, we need to add this to our imports list. So far so good. No errors. Let's go to step four.
We'll copy this line to include a theme and we'll go over to our styles.css file. So inside our src folder, we should see a styles.css. And if we open that up, we can paste that on line two. And if we check the app, we're still not getting any errors. Step five is Gesture Support, and we don't need that, so we can skip it. Step six is optional. And since the Angular CLI Generator did not create a project which uses SystemJS, we don't have to worry about this step.
And that should be it for Angular Material setup. Let's give it a try by going back to our editor and to our question.component, and adding the button beside our placeholder. Before we save this, let's go over to the Angular Material website once again, and under Components, we can see all the components that we are able to use. Since we're testing Button, let's click on that.
Here we can see an example button. Let's view the source. And we can see that we need the md-button property in our element, so let's copy that. And we'll paste it in. Let's save that and give it a try. Here we can see our test button. And when we hover over it, we're getting the Angular Material styling that we expect. At this point, everything should be working and we can start creating our new question layout. Let's go back to our editor and at this point we need to decide if we'll be using an inline template as we have here, or a separate HTML file as we have for our app.component, as shown on line six.
Since we'll have several inputs in order to create a question, such as the question title, the correct answer and three incorrect answers, plus a submit button, we should probably create an HTML file, since it will be quite large. So let's create a new file, and we'll call it question.component.html. Then instead of template, we'll have templateUrl.
We'll get rid of the content in the value, and we'll set the location to /question.component.html. Let's save that and add another placeholder. In our app, we can see the placeholder text. Next, let's begin by adding an input. Let's go over back to Angular Material, and inside Components, under Form Controls, we'll see Input.
Let's take a look at the code. We'll copy everything here and go back to our editor. Let's replace our placeholder text with what we copied. Since we don't have this class, let's get rid of this. And we don't have this class as well, so we can get rid of that, on line two. Then we'll get rid of value since we don't want a preset value. And we'll switch placeholder to Question. Let's give that a try.
We do see our input, but it doesn't have the correct styling. If you remember, we have to input every component module into our NgModule for it to work. So back in the Component guide, let's go to API and we can see we need to import MdInputModule. So I'll copy that and go back to our app.module and add that to line four. And to the list on line 14 as well. Let's save that and give it another try.
Once it reloads, we can see that it has the correct styling. It's looking good, but we have all this starter template on the screen at the same time. Let's get rid of that and start fresh. I'll simply get rid of our app.component.html. And I'll also get rid of the app.component.css. Then back in our app.component.ts, I'll get rid of the two properties templateUrl and stylesUrl on line six and seven.
And I'll add a template property, and once again, I'll compose our app component with our question component using the selector. Let's save that and give it a try. And that's looking a lot cleaner. Next let's create some sort of visual container that will hold our question. We'll go back to Angular Material Component list and scroll down to Layout. Here we can see Card.
Let's look at the code for that. We simply need an element md-card, so let's add that. So I'll wrap our form with that element. And of course, we'll need to add the materials module to our NgModule. So I'll go over to API, copy MdCardModule, and paste that into line four and line 14.
Since our imports list is getting quite long, I'll stack them vertically. Let's give that a try. Once it reloads, we can see the card is now wrapping our question. Eventually, we will add answers as well, but for now we will deal purely with questions until we get comfortable with posting and getting to and from our back-end. Now that our quiz question posting component is set up, let's take a look at how to add functionality to the component in the next video.
- 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