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.