top of page

Anguler js - Basic example of how to create a login and register

First, make sure you have Angular CLI installed. If not, you can install it globally by running the following command:


npm install -g @angular/cli

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


ng new my-app

Navigate to the project directory:


cd my-app

Now, let's create two components for login and register:


ng generate component login
ng generate component register

This will create two component folders: login and register with the necessary files.

Next, let's create routes for login and register. Open the app-routing.module.ts file and modify it as follows:

typescript

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Now, let's update the app.component.html file to include the navigation links:

html

<h1>My App</h1>
<nav>
<a routerLink="/login" routerLinkActive="active">Login</a>
<a routerLink="/register" routerLinkActive="active">Register</a>
</nav>
<router-outlet></router-outlet>

Next, open the login.component.html file and update it with a basic login form:

html

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

Similarly, update the register.component.html file with a basic registration form:

html

<h2>Register</h2>
<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">Register</button>
</form>

With these changes, you have a basic login and register functionality set up using Angular CLI. You can now run your application using the following command:


ng serve

Open your browser and navigate to http://localhost:4200. You should see the login and register links. Clicking on them will display the respective forms.

Remember, this is just a starting point, and you'll need to add validations, handle form submissions, and implement the actual login and registration logic based on your backend API or requirements.

Related Posts

See All

Anguler Js - Create a todo list in Anguler js

Set up a new Angular project by installing Angular CLI and creating a new project. Open a terminal and run the following commands: npm install -g @angular/cli ng new todo-list cd todo-list Create a ne

コメント


bottom of page