How to hide current and previous question for select option dropdown?


I am newly Angular 12 developers. I working Angular project using form array select multiple questions and click the next button question listed and jump options provided when click on select option remove previous and current questions. I have to face issue please help me how to fix the issue?

<div class="" *ngIf="isRedirectToQaOption">
                      <label for="">Questions</label>
                      <div formArrayName="questions">
                        <div *ngFor="
                        let qArray of questionData().controls;
                        let ind = index
                          <div class="questData" [formGroupName]="ind">
                            <div class="row">
                              <div class="col-1" style="line-height: 32px;font-weight: 700;margin-right: -40px;">
                              <div class="col-11">
                                <div class="form-group" style="position:relative">
                                  <input type="text" name="question" class="form-control" formControlName="question"
                                  <input type="hidden" name="questionId" class="form-control"
                                  <input type="hidden" name="type" class="form-control" formControlName="type">
                            <div class="question-choice" formArrayName="options">
                              <div class="col-12" *ngFor="
                              let optCtrl of optionsData(ind)
                              let optIndex = index
                                <div class="row" [formGroupName]="optIndex">
                                  <div class=" col-4">
                                    <div class="form-group">
                                      <label for="" *ngIf="optIndex===0 ">Option {{isQuestionType}}</label>
                                      <input type="text" name="option" id="option_{{ optIndex }}0"
                                        class="form-control" formControlName="option" readonly />
                                  <div class="col-4">
                                    <div class="form-group">
                                      <label for="" *ngIf="optIndex===0 ">Next Question <strong>(Select jump
                                      <!-- <ng-select [clearable]="false" [items]="overallQuestionArray"
                                        bindLabel="question" bindValue="linkedId" id="jumpto{{optIndex}}0"
                                        formControlName="jumpto" >
                                        <ng-template ng-option-tmp let-item="item">
                                          <div title="{{item.question}}">{{item.question}}</div>
                                      </ng-select> -->
                                      <select name="jumpto" id="jumpto{{optIndex}}0" class="form-control"
                                        <option value="" disabled></option>
                                        <ng-container *ngFor="let item of overallQuestionArray;let i=index;" >
                                          <option *ngIf="overallQuestionArray.length > 1" [value]="item.linkedId" [title]="item.question">Q{{i+1}}. {{item.question}}</option>
                                        <!-- <option
                                          [value]="item.linkedId" [title]="item.question">
                                          Q{{i+1}}. {{item.question}}</option> -->
                                  <div class="col-4">
                                    <div class="form-group" *ngIf="qtConfigId!='N'">
                                      <label for="" *ngIf="optIndex===0 ">In Eligible Policies</label>
                                      <ng-select [items]="getAvailPolicies" bindLabel="policy_code"
                                        bindValue="policy_id" [multiple]="true" [clearable]="false"></ng-select>


Your code is horrendous but I get the request so I can answer broadly.

Use a getter to get your options :

  question?: any;
  private _questions = [
    { id: 0, label: 'Do you like sushis ?', answers: ['Yes', 'No'] },
    { id: 0, label: 'Do you like pizzas ?', answers: ['Yes', 'No'] },
    { id: 0, label: 'Do you like dogs ?', answers: ['Yes', 'No'] },

  get questions() {
    return this._questions.fitler(q => q !== this.question);
  // Solution 2
  questions = [];

  setQuestion(question) {
    this.question = question;
    // Solution 2
    this.questions = this._questions.fitler(q => q !== this.question);

Use the first solution if you have a push change detection, use the solution 2 if you don’t have it.

Answered By – temp_user

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.