CODEWITHSUNDEEP
angular
user11352561
user11352561

Reputation: 2637

Angular - Show or Hide based on Dropdown list value

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

Upvotes: 4

Views: 47450

Answers (5)

Robin Joseph
Robin Joseph

Reputation: 23

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>

Upvotes: 0

damien altman
damien altman

Reputation: 91

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>

Upvotes: 0

Leandro Hern&#225;ndez Mira
Leandro Hern&#225;ndez Mira

Reputation: 837

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>

Upvotes: 4

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

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>

Upvotes: 11

Adrita Sharma
Adrita Sharma

Reputation: 22213

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>

Upvotes: 3

Related Questions