Login Page With Angular

Log in here

Today, I am excited to discuss my journey of creating a login page using Angular. As a developer, I have been impressed by the capabilities and adaptability of Angular, and I was delighted to utilize it for adding a login feature in a recent project. In this piece, I will guide you through the steps of creating a login page with Angular, offering in-depth explanations and incorporating my own personal touch.

Setting Up the Angular Project

Before we dive into creating the login page, let’s make sure we have a basic Angular project set up. If you haven’t already, go ahead and install Angular CLI by running the following command:

npm install -g @angular/cli

Once Angular CLI is installed, you can create a new Angular project using the following command:

ng new my-login-page

Navigate into the project directory:

cd my-login-page

Creating the Login Component

Now that we have our Angular project set up, let’s create a new component for our login page. Run the following command to generate the component:

ng generate component login

This command will create a new folder named “login” with the necessary files for the component. Open the newly created “login.component.html” file and replace its contents with the following code:

<form (ngSubmit)="login()">
  <label for="username">Username:</label>
  <input type="text" id="username" [(ngModel)]="username">

  <label for="password">Password:</label>
  <input type="password" id="password" [(ngModel)]="password">

  <button type="submit">Login</button>
</form>

In this code, we have a basic login form with input fields for username and password, as well as a submit button. Notice the usage of the ngModel directive, which allows us to bind the input values to the variables “username” and “password” in our component class.

Adding Functionality to the Login Component

To add functionality to our login page, open the “login.component.ts” file and update its contents with the following code:

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  username: string;
  password: string;

  login() {
    // Perform login logic here
    if (this.username === 'admin' && this.password === 'password') {
      alert('Login successful!');
    } else {
      alert('Invalid credentials. Please try again.');
    }
  }
}

In this code, we have defined two variables, “username” and “password,” which are used to store the values entered by the user in the login form. The “login()” function is responsible for handling the login logic. In this example, we are simply checking if the username is set to “admin” and the password is set to “password.” If the credentials match, we show a success message; otherwise, we display an error message.

Styling the Login Page

Now that we have our login functionality in place, let’s add some styling to our login page. Open the “login.component.css” file and add the following code:

:host {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  margin-bottom: 0.5rem;
}

input {
  margin-bottom: 1rem;
  padding: 0.5rem;
  border-radius: 3px;
  border: 1px solid #ccc;
}

button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 3px;
  background-color: #007bff;
  color: #fff;
}

In this code, we define some basic styles for our login page. The “:host” selector sets the height of the component to 100% of the viewport height and centers its content both vertically and horizontally. The “form” selector styles the login form itself, while the “label”, “input”, and “button” selectors style the form elements.

Conclusion

Creating a login page with Angular is a straightforward process that requires basic knowledge of Angular components, data binding, and form handling. By following the steps outlined in this article, you should now have a functional login page in your Angular project. Remember to customize the login logic and styling according to your project’s requirements.

For more details and advanced features, I encourage you to check out the official Angular documentation and explore the vast possibilities that Angular offers. Happy coding!