Шаговый двигатель углового материала
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
РЕКОМЕНДУЕМЫЕ СТАТЬИ |