क्या मैं प्रोग्राम्यूलर / एंगुलर मटेरियल में मैट-हॉरिज़ोन्टल-स्टेपर के चरणों को प्रोग्राम कर सकता हूँ

Question 1

मेरे पास एक सवाल है कि कोणीय सामग्री (कोणीय 4+ के साथ) का संबंध है। मेरे घटक टेम्पलेट में कहें कि मैं एक <mat-horizontal-stepper>घटक जोड़ता हूं , और प्रत्येक चरण के भीतर <mat-step>मेरे पास घटक नेविगेट करने के लिए स्टेपर बटन हैं। इस तरह...

<mat-horizontal-stepper>
  <mat-step>
    Step 1
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
  <mat-step>
    Step 2
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
  <mat-step>
    Step 3
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
</mat-horizontal-stepper>

अब मैं सोच रहा हूं कि क्या प्रत्येक चरण से बटन हटाना संभव है और उन्हें <mat-horizontal-stepper>एक स्थिर स्थिति में या कहीं <mat-horizontal-stepper>और बाहर भी है और मैं अपने घटक टाइपस्क्रिप्ट फ़ाइल के भीतर कोड का उपयोग करके पीछे और आगे की ओर नेविगेट कर सकता हूं। एक विचार देने के लिए, मैं चाहूंगा कि मेरा HTML कुछ इस तरह का हो

<mat-horizontal-stepper>
    <mat-step>
        Step 1
    </mat-step>
    <mat-step>
        Step 2
    </mat-step>
    <mat-step>
        Step 3
    </mat-step>
    <!-- one option -->
    <div>
       <button mat-button matStepperPrevious type="button">Back</button>
       <button mat-button matStepperNext type="button">Next</button>
    </div>
</mat-horizontal-stepper>

<!-- second option -->
<div>
   <button (click)="goBack()" type="button">Back</button>
   <button (click)="goForward()" type="button">Next</button>
</div>

Question 2

हाँ। की selectedIndexसंपत्ति का उपयोग करके एक विशिष्ट स्टेपर पर कूदना संभव है MatStepper। इसके अलावा, MatStepperसार्वजनिक तरीकों को उजागर करता है next()और previous()। आप उन्हें आगे और पीछे ले जाने के लिए उपयोग कर सकते हैं।

अपने टेम्पलेट में:

अपने stepper में एक आईडी जोड़ें उदा #stepper। फिर अपने goBack()और goForward()तरीकों में, स्टेपर आईडी पास करें:

<mat-horizontal-stepper #stepper>
    <!-- Steps -->
</mat-horizontal-stepper>    
<!-- second option -->
<div>
   <button (click)="goBack(stepper)" type="button">Back</button>
   <button (click)="goForward(stepper)" type="button">Next</button>
</div>

.. और आपकी टाइपस्क्रिप्ट में:

import { MatStepper } from '@angular/material/stepper';

goBack(stepper: MatStepper){
    stepper.previous();
}

goForward(stepper: MatStepper){
    stepper.next();
}

स्टैकब्लिट्ज डेमो के लिए लिंक ।

आप निम्न प्रकार ViewChildसे अपने टाइपस्क्रिप्ट में स्टेपर घटक का संदर्भ प्राप्त करने के लिए भी उपयोग कर सकते हैं:

@ViewChild('stepper') private myStepper: MatStepper;

goBack(){
    this.myStepper.previous();
}

goForward(){
    this.myStepper.next();
}

इस स्थिति में, आपको अपने घटक के HTML में विधि में स्टेपर संदर्भ को पास करने की आवश्यकता नहीं है। ViewChild के साथ डेमो के लिए लिंक

आप निम्नलिखित का उपयोग करके बटन Backऔर Nextबटन को सक्षम / अक्षम कर सकते हैं :

<button (click)="goBack(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === 0">Back</button>
<button (click)="goForward(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === stepper._steps.length-1">Next</button>

Question 3

@ फैसल के जवाब के अलावा, यह मेरी है कि स्टेपपर को तर्कों में पास करने की आवश्यकता के बिना मैटसेपर को कूदने के लिए तैयार किया जाता है।

यह तब सहायक होता है, जब आपको Serviceकिसी और चीज से स्टेपर जैसे हेरफेर करने में अधिक लचीलेपन की आवश्यकता होती है।

HTML:

<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="6px">
  <button (click)="move(0)">1st</button>
  <button (click)="move(1)">2nd</button>
  <button (click)="move(2)">3rd</button>
  <button (click)="move(3)">4th</button>
</div>

TS फ़ाइल:

move(index: number) {
    this.stepper.selectedIndex = index;
}

यहाँ स्टैकब्लिट्ज़ डेमो है ।

Question 4

यदि आप प्रोग्राम को अगले चरण में नेविगेट करना चाहते हैं और यदि आप एक रैखिक स्टेपर का उपयोग कर रहे हैं , तो निम्न चरणों का पालन करें:

stepperइस तरह बनाएं : <mat-horizontal-stepper linear #matHorizontalStepper>
mat-stepइस तरह परिभाषित करें:<mat-step [completed]="isThisStepDone">
अंदर से mat-stepइस तरह अगले चरण पर जाने के लिए एक बटन बनाएं: <button (click)="next(matHorizontalStepper)">NEXT STEP</button>
में .tsफ़ाइल एक घोषित MatStepperसंदर्भ नामित स्टेपर :
@ViewChild('matHorizontalStepper') stepper: MatStepper;
इसके अलावा, .tsफ़ाइल isThisStepDoneको गलत के रूप में आरंभ करें :isThisStepDone: boolean = false;

फिर NEXT STEP बटन के लिए विधि लिखें next():

submit(stepper: MatStepper) {
 this.isThisStepDone = true;
 setTimeout(() => {           // or do some API calls/ Async events
  stepper.next();
 }, 1);
}

Question 5

आप चयनितइंडेक्स का उपयोग करके स्टेपर के वास्तविक सूचकांक को निर्दिष्ट करके भी कर सकते हैं।

स्टैकब्लिट्ज़: https://stackblitz.com/edit/angular-4rvy2s?file=app%2Fstepper-overview-example.ts

HTML:

<div class="fab-nav-container">
   <mat-vertical-stepper linear="false" #stepper>
       <mat-step *ngFor="let step of stepNodes; let i = index">
           <ng-template matStepLabel>
               <p> {{step.title}} </p>
           </ng-template>
       </mat-step>
   </mat-vertical-stepper>
</div>

<div class="button-container">
   <div class="button-grp">
      <button mat-stroked-button (click)="clickButton(1, stepper)">1</button>
      <button mat-stroked-button (click)="clickButton(2, stepper)">2</button>
      <button mat-stroked-button (click)="clickButton(3, stepper)">3</button>
   </div>
</div>

टीएस:

import {Component, OnInit, ViewChild} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { MatVerticalStepper } from '@angular/material';
import { MatStepper } from '@angular/material';
export interface INodes {
    title: string;
    seq: number;
    flowId: string;
}
/**
 * @title Stepper overview
 */
@Component({
  selector: 'stepper-overview-example',
  templateUrl: 'stepper-overview-example.html',
  styleUrls: ['stepper-overview-example.scss'],
})
export class StepperOverviewExample implements OnInit {
  @ViewChild(MatVerticalStepper) vert_stepper: MatVerticalStepper;
  @ViewChild('stepper') private myStepper: MatStepper;

  stepNodes: INodes[] = [
    { title: 'Request Submission', seq: 1, flowId: 'xasd12'}, 
    { title: 'Department Approval', seq: 2, flowId: 'erda23'}, 
    { title: 'Requestor Confirmation', seq: 3, flowId: 'fsyq51'}, 
  ];

  ngOnInit() {
  }
  ngAfterViewInit() {
    this.vert_stepper._getIndicatorType = () => 'number';
  }
  clickButton(index: number, stepper: MatStepper) {
      stepper.selectedIndex = index - 1;
  }
}