AngularJS

Expansion Panel | Learn How to Create mat-accordion

Expansion Panel
Expansion Panel

Expansion Panel

HTML

<mat-accordion class="xyz">
	<mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)">
	  <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-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-action-row>
		<button class="btn btn-danger" (click)="prevStep()">Previous</button>
		<button class="btn btn-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-action-row>
		<button class="btn btn-warning" (click)="prevStep()">Previous</button>
		<button class="btn btn-info" (click)="nextStep()">End</button>
	  </mat-action-row>
	</mat-expansion-panel>  
</mat-accordion>

.ts

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

declare var AOS: any;
@Component({
  selector: 'app-my-page',
  templateUrl: './my-page.component.html',
  styleUrls: ['./my-page.component.scss']
})
export class MyPageComponent implements OnInit {

  step = 0;

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

  nextStep() {
    this.step++;
  }

  prevStep() {
    this.step--;
  }

  constructor() { }

  ngOnInit(): void {
    AOS.init();
  }
}

Expansion Panel

Expansion Panel

Expansion Panel

Expansion Panel

app.module.ts

import {MatExpansionModule} from '@angular/material/expansion';

imports: [
 MatExpansionModule
],

Expansion Panel

Expansion Panel

Expansion Panel

Expansion Panel


Learn HTML/CSS from W3 School Website