Accordion Style form in Angular using Angular Material

In this article, we’ll learn how to create an accordion-style form in angular using angular material. For that first, we need to install the angular material module in our application run below command to install the module.


npm i @angular/material
npm i @angular/flex-layout

After installing module lets add a module in our app.module.ts file. We need to import some basic modules for the accordion, forms, input, button display in the below code.


......
import {MatButtonModule} from '@angular/material/button';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatCardModule} from '@angular/material/card';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatStepperModule} from '@angular/material/stepper';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatDividerModule} from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatListModule} from '@angular/material/list';
import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import {MatTableModule} from '@angular/material/table';
................
@NgModule({
imports:[ 
..., 
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatNativeDateModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatTableModule,
...,
  ],
....
})



After adding a module in the app.module file we can use it in our component to draw the accordian. Let’s create app.component.ts file and create function for the next, previous and form data display function.


/*https://www.eduforbetterment.com/
*/
import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  step = 0;
  firstname:string = '';
  age:string ='';
  country:string = '';
  date:any;
  displaydata:boolean = false;

  setStep(index: number) {
    this.step = index;
  }

  nextStep() {
    this.step++;
  }

  prevStep() {
    this.step--;
  }

  displayData(){
     this.step++;
    this.displaydata = true;
  }
}

Display below is the code for the app.component.ts ,app.component.html,app.component.css


import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  step = 0;
  firstname:string = '';
  age:string ='';
  country:string = '';
  date:any;
  displaydata:boolean = false;

  setStep(index: number) {
    this.step = index;
  }

  nextStep() {
    this.step++;
  }

  prevStep() {
    this.step--;
  }

  displayData(){
     this.step++;
    this.displaydata = true;
  }
}


<mat-accordion class="example-headers-align">
  <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
        <mat-icon>account_circle</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <mat-label>First name</mat-label>
      <input matInput [(ngModel)]="firstname">
    </mat-form-field>

    <mat-form-field>
      <mat-label>Age</mat-label>
      <input matInput [(ngModel)]="age" type="number" min="1">
    </mat-form-field>
<!-- #docregion action-bar -->
    <mat-action-row>
      <button mat-button color="primary" (click)="nextStep()">Next</button>
    </mat-action-row>
<!-- #enddocregion action-bar -->
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Destination
      </mat-panel-title>
      <mat-panel-description>
        Type the country name
        <mat-icon>map</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <mat-label>Country</mat-label>
      <input matInput [(ngModel)]="country" >
    </mat-form-field>

    <mat-action-row>
      <button mat-button color="warn" (click)="prevStep()">Previous</button>
      <button mat-button color="primary" (click)="nextStep()">Next</button>
    </mat-action-row>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Day of the trip
      </mat-panel-title>
      <mat-panel-description>
        Inform the date you wish to travel
        <mat-icon>date_range</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <mat-label>Date</mat-label>
      <input matInput [matDatepicker]="picker" (focus)="picker.open()" [(ngModel)]="date" readonly>
    </mat-form-field>
    <mat-datepicker #picker></mat-datepicker>

    <mat-action-row>
      <button mat-button color="warn" (click)="prevStep()">Previous</button>
      <button mat-button color="primary" (click)="displayData()">End</button>
    </mat-action-row>
  </mat-expansion-panel>

</mat-accordion>
<br><br><br>
<div *ngIf="displaydata == true">
  <h2>Form Data</h2>
  Name: {{firstname}}<br><br>
  Age: {{age}}<br><br>
  Country: {{country}}<br><br>
  Date: {{date}}<br>
</div>


@import '~@angular/material/prebuilt-themes/indigo-pink.css';

body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}
.basic-container {
  padding: 30px;
}
.version-info {
  font-size: 8pt;
  float: right;
  margin: 8px;
}
.example-headers-align .mat-expansion-panel-header-title,
.example-headers-align .mat-expansion-panel-header-description {
  flex-basis: 0;
}

.example-headers-align .mat-expansion-panel-header-description {
  justify-content: space-between;
  align-items: center;
}

.example-headers-align .mat-form-field + .mat-form-field {
  margin-left: 8px;
}


For material icons we need to import google font in the inde.html file.


<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<div class="mat-app-background basic-container">
  <my-app>loading</my-app>
</div>



Output

Below is the full embeded code for the accordian form using angular material you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  • 2
  • 2
  •  
  •