আমি কি কৌণিক / কৌণিক পদার্থে মাদুর-অনুভূমিক-স্টিপারের পদক্ষেপগুলিকে প্রোগ্রামগতভাবে সরাতে পারি?

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>এবং আমি আমার উপাদান টাইপস্ক্রিপ্ট ফাইলের মধ্যে কোড ব্যবহার করে পিছনে এবং ফরোয়ার্ড নেভিগেট করতে পারি। একটি ধারণা দিতে, আমি আমার এইচটিএমএল কিছু হতে চাই

<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। তারপরে আপনার 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();
}

এই ক্ষেত্রে, আপনাকে আপনার উপাদানটির এইচটিএমএল পদ্ধতিতে স্টিপার রেফারেন্সটি পাস করতে হবে না। ভিউচিল্ডের সাথে ডেমোর লিঙ্ক

আপনি নিম্নলিখিতগুলি ব্যবহার করে 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বা অন্য কোনও জিনিস থেকে আরও নমনীয়তার প্রয়োজন তখন এটি সহায়ক ।

এইচটিএমএল:

<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>

টিএস ফাইল:

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():

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

এইচটিএমএল:

<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;
  }
}