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

Answer 1

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>

Answer 2

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> 

Answer 3

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>

Answer 4

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>