angular login and register page example
angularHere is an example of a login and registration page implemented using Angular:
<!-- login-register.component.html -->
<!-- Login form -->
<form #loginForm="ngForm" (ngSubmit)="login()" *ngIf="!showRegistration">
<label for="username">Username:</label>
<input type="text" id="username" name="username" [(ngModel)]="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" [(ngModel)]="password" required>
<br>
<button type="submit" [disabled]="!loginForm.form.valid">Log In</button>
</form>
<!-- Registration form -->
<form #registrationForm="ngForm" (ngSubmit)="register()" *ngIf="showRegistration">
<label for="username">Username:</label>
<input type="text" id="username" name="username" [(ngModel)]="username" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" [(ngModel)]="email" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" [(ngModel)]="password" required>
<br>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" [(ngModel)]="confirmPassword" required>
<br>
<button type="submit" [disabled]="!registrationForm.form.valid || password != confirmPassword">
Register
</button>
</form>
<!-- Switch between login and registration -->
<button (click)="showRegistration = !showRegistration">
{{ showRegistration ? 'Back to Login' : 'Sign Up' }}
</button>
// login-register.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-login-register',
templateUrl: './login-register.component.html',
styleUrls: ['./login-register.component.css']
})
export class LoginRegisterComponent {
username: string;
email: string;
password: string;
confirmPassword: string;
showRegistration = false;
login() {
// Perform login using the username and password
}
register() {
// Perform registration using the username, email, and password
}
}
This login and registration page consists of two forms: one for login and one for registration. The *ngIf
directive is
used to show or hide the forms based on the value of the showRegistration
property. The [(ngModel)]
directive is
used to
bind the input fields to the corresponding properties of the component. The required
attribute is used to specify that
the fields are required.
The login()
and register()
methods are called when the respective forms are submitted using the (ngSubmit)
directive.
These methods can be used to perform the login or registration


Other Article on Tag angular
- - angular add bootstrap
- - angular add semantic-ui
- - angular bootstrap navbar example
- - angular call backend api
- - angular install scully
- - angular login and register page example
- - angular login page example
- - angular navbar code example
- - angular scully generate route md file space replace
- - angular upload multiple file