We need at least two additional Material modules in order to implement a basic Login form, that is, the Input and Button component modules. Let's look at how we can add them:
- Update the src/app/app.module.ts file so that it contains the following code:
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
@NgModule({
declarations: [AppComponent, LoginComponent],
imports: [
// ...
MatInputModule,
MatButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
- Replace the contents of the src/app/login/login.component.html file with the following code:
<div class="login-form-container">
<div class="login-form">
<h1>Login</h1>
<mat-form-field class="login-field">
<input #loginField matInput placeholder="Username"
autocomplete="off" />
</mat-form-field>
<mat-form-field class="login-field">
<input #passwordField type="password" matInput
placeholder="Password" />
</mat-form-field>
<div class="login-actions">
<button mat-raised-button>Login</button>
</div>
</div>
</div>
In the preceding code, we are declaring a heading with the Login text. We have also provided two input fields and a button to perform authentication.
Next, we need to provide styling for the login form. Let's have the form centered horizontally. The Login button should be on the right-hand side of the screen. Let's get started:
- Update the src/app/login/login.component.scss file so that it contains the following code:
.login-form-container {
display: flex;
.login-form {
margin: auto;
min-width: 150px;
max-width: 500px;
width: 100%;
.login-field {
width: 100%;
}
.login-actions {
text-align: right;
}
}
}
- Run or restart the web server and check out the /login route.
- The application should now look as follows:
We need to provide at least basic validation and error handling for the dialog.