Angular 16 Restaurant Project V2 | Signup Page

Welcome to the third episode of our Angular 16 Restaurant Project V2 tutorial series. In this episode, we will be creating the signup page for our restaurant application using Angular 16. Let’s get started!

Setting up the Signup Page

First, let’s create a new component for the signup page. Open your terminal and run the following command:

ng generate component signup

This will generate a new folder called “signup” with all the necessary files for our signup page. Now, let’s add a form to our signup component’s HTML file:

    <form>
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username">
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email">
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password">
        </div>
        <button type="submit">Signup</button>
    </form>
    

Styling the Signup Page

Next, let’s add some CSS to our signup component’s CSS file to style our form:

    form {
        display: flex;
        flex-direction: column;
        max-width: 300px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    input {
        margin-bottom: 10px;
        padding: 10px;
        font-size: 16px;
    }

    button {
        padding: 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    

Adding Functionality to the Signup Page

Finally, let’s add some functionality to our signup component’s TypeScript file to handle form submission:

    import { Component } from '@angular/core';

    @Component({
        selector: 'app-signup',
        templateUrl: './signup.component.html',
        styleUrls: ['./signup.component.css']
    })
    export class SignupComponent {
        onSubmit() {
            // Handle form submission logic here
            console.log('Form submitted!');
        }
    }
    

That’s it! Our signup page is now ready. In the next episode, we will be adding authentication and user management functionality to our Angular 16 Restaurant Project V2. Stay tuned!