Create a layout in your template that will take in a first name, last name, email password, and confirm password.
- [Instructor] Let's dive into the world of authentication, and start working our way towards a registration view. Let's create a new component. I'll call it register.component.ts. And as the name indicates, this component will allow us to register new users. Let's copy the content from app.component, as a template. And, let's paste that in. We won't need the nav component. And let's change the selector name.
I'll also clear the template. And finally, change the class name. In this case, I know the register template will be quite big. And so, a stand-alone html file might make more sense, than having our template inside our component. So, what I will do is change our template to a template URL. And I'll use single quotes. I'll call the html file register.component.html.
Let's add that file as well. So, I'll copy that, add a new file, and paste the name in. Let's set some placeholder text inside our register html. And now, let's register it with our main module. So, I'll open up app.module, and let's import it in.
And let's add the RegisterComponent to our declarations list. Let's give that a try. As we can see, it's not able to find the html file we created. Even though we specified the correct file name, it requires an absolute location. So instead of typing out the entire directory structure, what we can do, is add a module ID. So, above selector, on the new line four, I'll add that.
And I'll set it to value module.id. And now we can supply our html file, using its relative location. So, let's save that, and try it again. As we can see, it's loading, and there's no longer any errors. And finally, let's create the route for our new RegisterComponent. So, let's go over to app.module.ts, and inside our routes list, we'll add a new route. And I'll just copy the one above as a template.
And I'll call this path register. And the component will be RegisterComponent. Let's save that up, and give it a try. And we're seeing our template, as expected. Next, let's begin by adding some inputs in the html. We will start with the user's first name.
Let's add in our input. So, inside the RegisterComponent html, let's get rid of this Register text, and then, let's add in our input. We'll start with an md-input-container, and we'll close it off. And then we'll add in our input, with a placeholder of First Name.
And I'll also add a custom style, with the width of 350 pixels, so that it's slightly wider than default. Next, let's copy this, and paste it four more times. A second time for Last Name. And I'll change the placeholder on line five to Last Name. Third, for Email.
Fourth, for Password. And the fifth, for Confirm Password. Next, I'll add a type to Email, on line 8. And a type to Password, on line 11. And we'll add the same thing on our Confirm Password, in line 14.
Let's give that a try. As we can see, it's looking pretty good. Next, let's just wrap everything inside a md-card, so that we get more contrast. And, there we go. Next, let's take a look at turning this into a form, so we can get and validate its values.
- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.