Adding the signup form in MEAN Stack

In our previous section, we designed the login form with handling user input. We have our login form, and now, we need to add or design our signup form. We use the following steps to add or designed the signup page:

1) Our signup form will look a lot like the login form. So, in our signup folder, we will paste all the three login files and rename them.

2) In the signup.component.ts file, we will rename the local reference with signupForm, the calling function name with onSignup(), and the caption for the button with "Signup".

3) We will go back to our typescript file, and there we will rename the class name with the signupcomponent. We will also change the method name here because, at this time, it will be onSignup. We will change the templateUrl and styleUrls also because here we want to load the html and CSS file of the signup component.

4) We will go back to our module.ts file to register the signup component. We will register the signup component in the same way as we registered the login component.

5) We will go to our app-routing.module.ts file and register a route for our signup component as we did for the logincomponent.

6) Now, we need to update the header so that we have a link leading to that signup component. We will replicate the list item here and go to /signup and replace the caption with signup.

Now, if we go back to our angular application, we will see the signup button and form.

We have our login and signup form, and now we need to create the backend for this and for that, we will create routes that allow us to do that. We will also handle new users with Mongoose and store them in the database. We will do all these things later in the next section.