Angular Simple Login Page

Log in here

Angular Simple Login Page

As a web developer, one of the most common requirements is to create a login page for user authentication. In this article, I will guide you through the process of creating a simple login page using Angular, a popular JavaScript framework.

Introduction to Angular

Angular is a powerful front-end framework developed by Google that allows you to build dynamic and responsive web applications. It utilizes TypeScript, a superset of JavaScript, to enable developers to write more structured and scalable code. With its modular architecture and extensive tooling, Angular has become the framework of choice for many developers.

Setting up the Project

To create our simple login page, we first need to set up a new Angular project. Open your terminal and run the following command:

ng new simple-login-page

This will create a new Angular project in a directory named “simple-login-page”. Once the project is created, navigate into the project directory by running:

cd simple-login-page

Creating the Login Component

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

ng generate component login

This command will generate a new component named “login” along with its associated files. The component files will be located in the “src/app/login” directory.

Open the “login.component.html” file and replace its content with the following code:


<form>
<h3>Login</h3>
<div>
<label>Email:</label>
<input type="email" [(ngModel)]="email" name="email" required>
</div>
<div>
<label>Password:</label>
<input type="password" [(ngModel)]="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>


In the above code, we have created a simple login form with input fields for email and password. The “[(ngModel)]” directive is used for two-way data binding, which allows us to bind the input values to the component’s properties.

Adding Authentication Logic

Now that we have our login form, we need to add the authentication logic to it. Open the “login.component.ts” file and replace its content with the following code:


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

login() {
// Add your authentication logic here
if (this.email === '[email protected]' && this.password === 'password') {
alert('Login successful!');
} else {
alert('Invalid email or password');
}
}
}


In the code above, we have defined two properties – “email” and “password” – to store the values entered in the form fields. The “login” method is triggered when the form is submitted, and it performs the authentication logic. In this example, we are simply checking if the email and password match a predefined value, but in a real-world application, you would typically make an API call to verify the user’s credentials.

Styling the Login Page

To make our login page visually appealing, let’s add some basic styles. Open the “login.component.css” file and replace its content with the following code:


form {
max-width: 300px;
margin: 0 auto;
padding: 20px;
background: #f2f2f2;
border: 1px solid #ccc;
border-radius: 5px;
}

button:hover {
background: #45a049;
}


The CSS code provided styles the form, input fields, and button with a clean and modern look. Feel free to customize the styles to match your project’s design.

Conclusion

Creating a simple login page with Angular is relatively straightforward. By following the steps outlined in this article, you have learned how to set up an Angular project, create a login component, add authentication logic, and style the login page. Remember, this is just a starting point, and you can enhance the login page with additional features such as password recovery, social login integration, or form validation.

For a live example of the simple login page, you can visit the following URL: https://example.com/login.

I hope this article has been helpful in getting you started with Angular and creating a simple login page. Happy coding!