Angular 7.2.4Angular7MaterialAngular

Angular 7 Step form Working Example


Hello to all, welcome to In this post, I will tell you, Angular 7 Step form Working Example.

If you are new in Angular 7 then you can check my old posts related to Angular 7.

In this post, I am using Angular latest version Angular 7.2.4 and Angular Material.

Angular 7 Step form Working Example

Angular 7 Step form Working Example2

Here is the working code snippets you need to follow carefully:

1. Here is the basics npm commands you need to run to install latest angular setup and angular material:

ng new angularStepper

cd angularStepper

npm install --save @angular/material @angular/cdk @angular/animations

ng serve


2. Here is the code,  you need to add into app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatStepperModule } from '@angular/material/stepper';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material';
import { MatInputModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }


3. Here is the code you need to add into your styles.css file:

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';


4. Here is the code you need to add into your app.component.ts file:

import { Component } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'angularphp';
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  isOptional = false;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.firstFormGroup ={
      firstCtrl: ['', Validators.required]
    this.secondFormGroup ={
      secondCtrl: ''


5. Here is the code, you need to add into your app.component.html file:

<link href=""rel="stylesheet">
<button mat-raised-button (click)="isOptional = !isOptional">
  {{!isOptional ? 'Enable optional steps' : 'Disable optional steps'}}
<mat-horizontal-stepper linear #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
        <button mat-button matStepperNext>Next</button>
  <mat-step [stepControl]="secondFormGroup" [optional]="isOptional">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>


If you have any query related to this post then please add comment below or ask questions.

Jassa Jatt,

Thank you.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

Positive SSL