Angular Tutorial: Login Component 🎯

Welcome to our comprehensive Angular tutorial on creating a Login Component! In this guide, we'll walk you through building a Login form step by step, covering everything from setting up the project to creating a functional login system. Let's get started!

What is Angular? 📝

Angular is an open-source JavaScript framework developed by Google for building dynamic web applications. It enables developers to create efficient, maintainable, and scalable web applications using TypeScript, a typed superset of JavaScript.

Setting Up the Project 💡

Before we dive into the Login Component, let's set up a new Angular project using the Angular CLI.

bash

ng new login-app
cd login-app

Creating the Login Component 🎯

Now, let's create a Login Component called login to handle our login form.

bash

ng generate component login

The login.component.ts File 📝

Open the newly created login.component.ts file and let's define the component, its input, and output properties.

typescript

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  @Input() errorMessage: string;
  @Output() loginSuccess = new EventEmitter<any>();
  @Output() loginFailure = new EventEmitter<any>();

  username: string;
  password: string;

  onSubmit() {
    // Validate and submit form logic here
  }
}

In this file, we have defined the LoginComponent with @Input properties for error messages and @Output events for successful and failed login. We also have username and password properties for user input.

The login.component.html File 📝

Now, let's create the HTML template for our Login form in the login.component.html file.

html

<div *ngIf="errorMessage" class="error">{{ errorMessage }}</div>
<form (submit)="onSubmit()">
  <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 file, we have defined an HTML form with ngModel directives for binding the user input to our component properties. We also have an error message display condition using the *ngIf directive.

Practical Example 💡

Let's create a simple login function in our component that checks for correct credentials.

typescript

onSubmit() {
  if (this.username === 'admin' && this.password === 'password') {
    this.loginSuccess.emit(this.username);
  } else {
    this.errorMessage = 'Incorrect username or password';
    this.loginFailure.emit(this.errorMessage);
  }
}

In this example, we have a simple login function that checks for correct credentials. If the credentials are correct, it emits the username through the loginSuccess event. Otherwise, it sets an error message and emits the error through the loginFailure event.

Quiz 📝

That's it for our first lesson on creating a Login Component in Angular! Stay tuned for more detailed tutorials on Angular and other exciting topics. Happy coding! ✅