Creating a Material Login Form

Updated Version

There is an updated version of this article here:

Scenario

We need a material login form, like the one seen below, as a prototyping and learning tool.

Setup

Perform the setup steps or fork the Stackblitz demo from the article:

Note that in this case the BrowerAnimationsModule from @angular/platform-browser/animations must also be included.

Approach

Step 1

Initialize the material module with the needed components:

import { NgModule } from '@angular/core';import {
MatCardModule,
MatInputModule,
MatButtonModule
} from '@angular/material';
const modules = [
MatCardModule,
MatInputModule,
MatButtonModule
];
@NgModule({
imports: modules,
exports: modules,
})
export class MaterialModule {}

Step 2

Create the login form component:

Step 3

Import the material module, and the login form component, into the app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { LoginFormComponent } from './login-form.component';
import { MaterialModule } from './material.module';
@NgModule({
imports:[ BrowserModule, ReactiveFormsModule, MaterialModule, BrowserAnimationsModule],
declarations: [ AppComponent, LoginFormComponent ],
bootstrap: [ AppComponent ]})
export class AppModule {}

Summary

Congratulations. You now have a material login form component for future authentication and security experimentation.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation