Шаговый двигатель углового материала
Angular Material — это библиотека компонентов пользовательского интерфейса, разработанная Google, чтобы разработчики Angular могли разрабатывать современные приложения структурированным и отзывчивым образом. Используя эту библиотеку, мы можем значительно повысить удобство работы конечного пользователя, тем самым популяризируя наше приложение. Эта библиотека содержит современные готовые к использованию элементы, которые можно использовать напрямую с минимальным дополнительным кодом или без него.
Компонент Stepper в материале Angular позволяет пользователю создать рабочий процесс, похожий на мастер, путем разделения содержимого на логические шаги. Чтобы использовать Stepper в Angular Material, используется директива Angular <mat-stepper> , которая отвечает за логику, управляющую пошаговым рабочим процессом. Angular Material предоставляет различные компоненты, описанные ниже:
- Варианты степпера: он состоит из 2 вариантов, то есть горизонтального степпера и вертикального степпера, которые можно переключать с помощью атрибута ориентации. Директивы <mat-stepper>, <mat-horizontal-stepper> и <mat-vertical-stepper> используются в материале angular для создания шагов рабочего процесса на веб-странице.
- Метки : этот атрибут можно использовать, если метки на шаге — это только текст. Для сложных надписей в шаблоне можно использовать директиву matStepLabel , указав ее внутри mat-step .
- Stepper Buttons: он предоставляет 2 директивы кнопок, т. е. matStepperPrevious и matStepperNext, которые поддерживают навигацию между различными шагами.
- Линейный степпер: этот степпер можно создать с помощью директивы mat-stepper , установив линейный атрибут, необходимый для выполнения предыдущих шагов, прежде чем переходить к следующим шагам.
Синтаксис:
<mat-stepper [linear]="isLinear" #stepper>
<mat-step>
</mat-step>
</mat-stepper>
<mat-horizontal-stepper labelPosition="bottom" linear>
<mat-step label="Label">
</mat-step>
</mat-horizontal-stepper>
<mat-vertical-stepper labelPosition="bottom" linear>
<mat-step label="Label">
</mat-step>
</mat-vertical-stepper>Синтаксис установки: основным предварительным условием является то, что в системе должен быть установлен Angular CLI, чтобы добавить и настроить библиотеку материалов Angular. Следующая команда выполняется в Angular CLI для установки библиотеки материалов angular:
ng add @angular/material
Перед выполнением вышеуказанной команды убедитесь, что путь открыт в терминале.
Подробную процедуру установки см. в статье Добавление компонента Angular Material в приложение Angular.
Добавление компонента Stepper: чтобы использовать компонент Stepper, нам нужно импортировать его в файл app.module.ts :
import {MatStepperModule} from "@angular/material/stepper";Чтобы использовать компонент кнопки-переключателя в нашем коде, мы должны импортировать MatStepperModule в массив импорта.
Структура проекта: После успешной установки структура проекта будет выглядеть следующим образом:
Пример 1: Пример ниже иллюстрирует реализацию степпера Angular Material Stepper.
- app.module.ts
Javascript
import { NgModule } from "@angular/core";import { BrowserModule } from "@angular/platform-browser";import { AppComponent } from "./app.component";import { MatStepperModule } from "@angular/material/stepper";import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, MatStepperModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent]})export class AppModule { } |
- app.component.ts
Javascript
import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"]})export class AppComponent { title = "AngularApp";} |
- app.component.html
HTML
<div> <h1>GeeksforGeeks</h1> <h3>Angular Material Horizontal Stepper</h3> <mat-horizontal-stepper labelPosition="bottom" linear> <mat-step label="Shipping Address" completed="true"> <p>Shipping Address Details</p> </mat-step> <mat-step label="Billing Address" completed="false" optional> <p>Billing Address Details</p> <div> <button mat-button matStepperPrevious> Back </button> <button mat-button matStepperNext> Next </button> </div> </mat-step> <mat-step label="Place Order" completed="false"> <p>Order Details</p> </mat-step> </mat-horizontal-stepper> <h3>Angular Material Vertical Stepper</h3> <mat-vertical-stepper labelPosition="bottom" linear> <mat-step label="Shipping Address" completed="true"> <p>Shipping Address Details</p> </mat-step> <mat-step label="Billing Address" completed="false" optional> <p>Billing Address Details</p> <div> <button mat-button matStepperPrevious> Back </button> <button mat-button matStepperNext> Next </button> </div> </mat-step> <mat-step label="Place Order" completed="false"> <p>Order Details</p> </mat-step> </mat-vertical-stepper></div> |
Выход:
Пример 2: Это еще один пример, описывающий реализацию степпера углового материала путем указания различных полей ввода в горизонтальном и вертикальном степпере.
- app.module.ts
Javascript
import { NgModule } from "@angular/core";import { AppComponent } from "./app.component";import { BrowserAnimationsModule } from "@angular/platform-browser/animations";import { BrowserModule } from "@angular/platform-browser";import { MatStepperModule } from "@angular/material/stepper";import { MatInputModule } from "@angular/material/input";import { MatButtonModule } from "@angular/material/button";import { FormsModule, ReactiveFormsModule } from "@angular/forms";@NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MatStepperModule, MatInputModule, MatButtonModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent]})export class AppModule { } |
- app.component.ts
Javascript
import { Component } from "@angular/core";import { FormControl } from "@angular/forms";import { FormGroup } from "@angular/forms";import { FormBuilder } from "@angular/forms";import { Validators } from "@angular/forms";export interface Food { value: string; display: string;}@Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"]})export class AppComponent { title = "AngularApp"; firstFormGroup!: FormGroup; secondFormGroup!: FormGroup; firstFormGroup1!: FormGroup; secondFormGroup1!: FormGroup; constructor(private _formBuilder: FormBuilder) { } ngOnInit() { this.firstFormGroup = this._formBuilder.group({ firstCtrl: ["", Validators.required] }); this.secondFormGroup = this._formBuilder.group({ secondCtrl: ["", Validators.required] }); this.firstFormGroup1 = this._formBuilder.group({ firstCtrl1: ["", Validators.required] }); this.secondFormGroup1 = this._formBuilder.group({ secondCtrl1: ["", Validators.required] }); }} |
- app.component.html
HTML
<div> <h1>GeeksforGeeks</h1> <h3>Angular Material Horizontal Stepper</h3> <mat-horizontal-stepper #stepper linear> <mat-step [stepControl]="firstFormGroup"> <form [formGroup]="firstFormGroup"> <ng-template matStepLabel> Enter your name </ng-template> <mat-form-field> <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required /> </mat-form-field> <div> <button mat-button matStepperNext> Next </button> </div> </form> </mat-step> <mat-step [stepControl]="secondFormGroup"> <form [formGroup]="secondFormGroup"> <ng-template matStepLabel> Enter your address </ng-template> <mat-form-field> <input matInput placeholder="Address" formControlName="secondCtrl" required /> </mat-form-field> <div> <button mat-button matStepperPrevious> Back </button> <button mat-button matStepperNext> Next </button> </div> </form> </mat-step> <mat-step> <ng-template matStepLabel> Done </ng-template> Details taken. <div> <button mat-button matStepperPrevious> Back </button> <button mat-button (click)="stepper.reset()"> Reset </button> </div> </mat-step> </mat-horizontal-stepper> <h3>Angular Material Vertical Stepper</h3> <mat-vertical-stepper #stepper1 linear> <mat-step [stepControl]="firstFormGroup1"> <form [formGroup]="firstFormGroup1"> <ng-template matStepLabel> Enter your name </ng-template> <mat-form-field> <input matInput placeholder="Last name, First name" formControlName="firstCtrl1" required /> </mat-form-field> <div> <button mat-button matStepperNext> &n
РЕКОМЕНДУЕМЫЕ СТАТЬИ |