Angular - Show or Hide based on Dropdown list value

Question

I want my Dropdown list to show/hide Div based on the value selected

I have a dropdown list and several Div in my angular project as shown in the code

<div class="col-md-12 no-padding">
                    <label>Reply Type</label>

                    <select class="form-control select2" formControlName="replytype" type="text" style="width: 100%;">
                     <option value="predefined">Predefined</option>
                     <option value="opentype">Open Type</option>
                    </select>           
              </div>

Div1

                      <div class="col-md-12 no-padding">
                        <label>Application Name</label>
                        <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
                        <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
                            Application Name is required! </span>
                      </div>

Div2

                <div class="col-md-12 no-padding">
                  <label>Main Menu</label>
                  <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
                </div>

If the selected value is predefined then Div1 is visible and Div2 is hidden, but if it is opentype then Div2 is visible and Div1 is hidden.

By default, the Div1 value should be opentype and Div2 should be visible

AddWeb Solution Pvt Ltd · Accepted Answer · 2019-05-21 13:54:58Z

11

Here I've used ngModel in the dropdown so, that you can get the value which you've selected from the dropdown.

<div class="col-md-12 no-padding">
                    <label>Reply Type</label>

                    <select class="form-control select2" formControlName="replytype" type="text" style="width: 100%;" [(ngModel)]="optionValue">
                     <option value="predefined">Predefined</option>
                     <option value="opentype" selected>Open Type</option>
                    </select>           
</div>

and in Ts file, you need to declare one variable called optionValue like this:

`optionValue`;

and now you can use ngIf for show/hide Divs.

Div1

<ng-container *ngIf="optionValue == 'predefined'>
 <div class="col-md-12 no-padding">
                    <label>Application Name</label>
                    <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
                    <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
                        Application Name is required! </span>
                  </div> 
</ng-container>

Div2

<ng-container *ngIf="optionValue == 'opentype'"
<div class="col-md-12 no-padding">
              <label>Main Menu</label>
              <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
            </div> 
</ng-container>

answered May 21, 2019 at 13:54

AddWeb Solution Pvt Ltd

21.8k5 gold badges30 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user11352561 Over a year ago

I should declare optionValue as what type of variable?

Leandro Hernández Mira · Accepted Answer · 2019-05-21 14:16:29Z

You can add a variable that controls the selected value. For example selectedType, then, use ngIf to hide or show the elements.

In the .component.ts

  selectedType = 'opentype';

  onChange(event) {
    this.selectedType = event.target.value;
  }

In the html

<div class="col-md-12 no-padding">
  <label>Reply Type</label>

  <select (change)="onChange($event)" formControlName="replytype" class="form-control select2" type="text" style="width: 100%;">
    <option value="predefined">Predefined</option>
    <option selected value="opentype">Open Type</option>
  </select>
</div>

<div *ngIf="selectedType == 'predefined'" class="col-md-12 no-padding">
  <label>Application Name</label>
  <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
  <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
    Application Name is required! </span>
</div>

<div *ngIf="selectedType == 'opentype'" class="col-md-12 no-padding">
  <label>Main Menu</label>
  <input type="text" class="form-control" id="mainmenu" placeholder="Message Text">
</div>

Adrita Sharma · Accepted Answer · 2019-05-21 13:52:39Z

3

You can use *ngIf to show/hide div based on selected value

Try this:

<select class="form-control select2" formControlName="replytype" type="text" style="width: 100%;" (change)="setReplyTypeValue()">
  <option value="predefined">Predefined</option>
  <option value="opentype">Open Type</option>
</select>

TS:

selectedValue:any

  setReplyTypeValue() {
   // set 'predefined' or 'opentype' based on selected value of the form
    this.replytype = selectedValue
  }

DIV1:

<div class="col-md-12 no-padding" *ngIf="replytype =='predefined'">
  <label>Application Name</label>
  <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
  <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
      Application Name is required! </span>
</div>

DIV2:

<div class="col-md-12 no-padding" *ngIf="replytype =='opentype'">
  <label>Main Menu</label>
  <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
</div>

answered May 21, 2019 at 13:52

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

1 Comment

Shahriar Rahman Zahin Over a year ago

I like this answer because now I have more control over the code, like whether I want want to add some more logic or not. Btw, what am I supposed to do to disable any type of validation on hidden div?

damien altman · Accepted Answer · 2019-05-21 15:29:52Z

With replytype in ts you have two method

<div class="col-md-12 no-padding">
    <label>Reply Type</label>
    <select class="form-control select2" [(ngModel)]="replytype" type="text" style="width: 100%;">
     <option value="predefined">Predefined</option>
     <option value="opentype">Open Type</option>
    </select>
</div>

First methode with *ngIf; else

<div class="col-md-12 no-padding"  *ngIf="replytype === 'predefined'; else #opentype">
    <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
    <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
        Application Name is required! 
    </span>
<div>

<ng-template #opentype>
    <div class="col-md-12 no-padding">
      <label>Main Menu</label>
      <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
    </div> 
</ng-template>

Or second methode with ngSwitch (You can have many div to display)

<ng-container [ngSwitch]="replytype">
    <div class="col-md-12 no-padding"  *ngSwitchCase="'predefined'">
        <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
        <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
            Application Name is required! 
        </span>
    </div> 

    <div class="col-md-12 no-padding" *ngSwitchDefault>
      <label>Main Menu</label>
      <input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
    </div> 
</ng-container>

Max Play · Accepted Answer · 2021-05-11 13:20:25Z

For reactive form we can use

form.controls['<fieldname>'].value === 'somecheckvalue'

For example:

<div class="col-md-12 no-padding">
  <label>Reply Type</label>

  <select (change)="onChange($event)" formControlName="replytype" class="form-control select2" type="text" style="width: 100%;">
    <option value="predefined">Predefined</option>
    <option selected value="opentype">Open Type</option>
  </select>
</div>

<div *ngIf="form.controls['replytype'].value === 'predefined'" class="col-md-12 no-padding">
  <label>Application Name</label>
  <input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
  <span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
    Application Name is required! </span>
</div>

<div *ngIf="form.controls['replytype'].value === 'opentype'" class="col-md-12 no-padding">
  <label>Main Menu</label>
  <input type="text" class="form-control" id="mainmenu" placeholder="Message Text">
</div>

Collectives™ on Stack Overflow

Angular - Show or Hide based on Dropdown list value

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related