Join Alexander Zanfir for an in-depth discussion in this video Register from Angular, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] Now that we have our back-end register components, let's create the front-end components. We'll go over to our app folder, create a new file. We'll call it register.component.ts. Then let's open up our quiz.component.ts and copy this as a template. Then I'll paste it in. Then let's update the decorator. I'll begin by removing the selector, since we probably won't compose with our register component. Then I'll change the templateUrl, from quiz to register.
And of course, we'll need a HTML file, so let's add that. We can assume ahead of time that there will be a good amount of HTML for our form and validation. And so, we'll create a separate HTML file, instead of having it inline inside the decorator. Next I'll get rid of this quiz object inside our class. Then I'll rename the class.
And I'll empty out the ngOnInit(). Next let's register our register.component with our app.module. So I'll import it below line 22. And then, let's add it to our declarations list. And then, let's also create a route for it. So I'll replace the questions path with our register.
So I'll call it register and change component to RegisterComponent. Next let's give it a try. And since we're not getting any errors, we can see that it is loading our component correctly. Since we got rid of the questions list, let's get rid of the button as well. So let's open up our nav, and then change the button from Question List to Register and update the router link. Let's give it a try.
I'd also like to align the register button to the right, so that it's in a different section than the other quiz and question buttons. So in our nav, above our register button, we'll add a new line, and using a <span>, I'll add a style using flex: 1 1 auto; to right align, and that's looking better. Since we're modifying our nav.component, we should get rid of our Question button as well, since we can't add a question without first selecting a quiz.
So I'll just remove line eight and hit save. Now that we have those changes, let's create our register form. So let's load up our HTML. So I've loaded the register.component.html and I'll start to add the form. So we'll use an <md-card>, as usual, and then we'll add a <form>. Inside the <form>, let's add an <input>. So we'll use <md-form-field> and then the <input>.
Let's save that and give it a try. And we can see the Email input. Let's go ahead and add one for password as well. So I'll copy lines three to five and paste that below, and change the placeholder from Email to Password. Then I'll set the type to password as well and I'll set the type for email to email. And finally, we need a button. So let's add one below line eight.
And I'll set the style to md-raised-button with color="primary" and the button text will be Register. Let's give that a try. So that's pretty good. Next we'll take a quick look at validation to make sure there's some minimal requirements before they can register their user account.
- 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