Creating a Material Login Form

Updated Version

There is an updated version of this article here:


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


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.


Step 1

Initialize the material module with the needed components:

import { NgModule } from '@angular/core';import {
} from '@angular/material';
const modules = [
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';
imports:[ BrowserModule, ReactiveFormsModule, MaterialModule, BrowserAnimationsModule],
declarations: [ AppComponent, LoginFormComponent ],
bootstrap: [ AppComponent ]})
export class AppModule {}


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