Как создать Form-Wizard в угловых 4

Question

Я пытаюсь создать мастер форм или Пошаговый индикатор прогресса когда я нажимаю кнопку "Далее", мне нужно переместить мастер форм, а когда я нажимаю предыдущую кнопку, мне нужно вернуться назад-Wizard в angular4.Мне нужно вот так, см. Ниже изображение

введите описание изображения здесь

Мой pacaage.json { "name": "ph-aware-ng", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^4.4.7", "@angular/cdk": "^6.2.1", "@angular/common": "^4.2.4", "@angular/compiler": "^4.2.4", "@angular/core": "^4.2.4", "@angular/forms": "^4.2.4", "@angular/http": "^4.2.4", "@angular/material": "^6.2.1", "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", "@toverux/ngx-sweetalert2": "^3.3.1", "@types/moment": "^2.13.0", "angular2-materialize": "^15.1.10", "animate": "^1.0.0", "animation": "^0.1.3", "bootstrap": "4.0.0-beta.2", "core-js": "^2.4.1", "font-awesome": "^4.7.0", "hamburgers": "^0.9.3", "hammerjs": "^2.0.8", "jquery": "^2.2.4", "materialize-css": "^0.100.2", "moment": "^2.20.1", "ngx-bootstrap": "^2.0.2", "ngx-toastr": "^6.5.0", "rxjs": "^5.4.2", "sweetalert2": "^7.22.0", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.4.5", "@angular/compiler-cli": "^4.2.4", "@angular/language-service": "^4.2.4", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/jquery": "^3.3.0", "@types/node": "~6.0.60", "codelyzer": "~3.2.0", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "^5.3.2", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "~2.3.3" } }

Любая помощь, полезная для меня ..Заранее спасибо

Answer 1

Одним из лучших способов реализации Form-Wizard является использование Angular Material Stepper.Подробная информация об использовании степпера здесь .

Для использования материала сначала выполните следующие шаги:

Шаг 1: Установите угловой материал и угловой CDK

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

Запустите эту команду на своем терминале.

Шаг 2: Импортируйте модули компонентов.В вашем App.module.ts импортируйте необходимые модули материалов.

import {MatButtonModule, MatStepperModule,} from '@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatStepperModule,],
  ...
})
export class AppModule { }

Импортируйте все необходимые модули материалов в AppModule.Доступные опции: здесь

Шаг 3. Включите тему.Включение темы необходимо для применения всех основных и тематических стилей к вашему приложению.

Если вы используете Angular CLI, добавьте это в styles.css

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

Руководство по тематике см. это

Шаг 4 (необязательно): добавление значков материалов.Он используется для включения значков.

Для значков свяжите следующую таблицу стилей в index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Найдите все доступные значки здесь

Теперь для степпера или мастера форм, вот демоверсия Stackblitz