Javatpoint Logo
Javatpoint Logo

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.

Adding the signup form in MEAN Stack

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".

Adding the signup form in MEAN Stack

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.

Adding the signup form in MEAN Stack

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.

Adding the signup form in MEAN Stack

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.

Adding the signup form in MEAN Stack

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.

Adding the signup form in MEAN Stack

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

Adding the signup form in MEAN Stack

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.






Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA