Angular: If this option in dropdown show this div

user_10167760 0
Viewed 472

How do you show and hide divs in Angular (4 thru 9) upon a user selecting an option(s) in a dropdown select?

My code below is only showing one/the same div no matter the option I select.

 public Terminated = true; 
 public Release = true;

selectedFilter:string;
   public filterTypes = [
   {value:'empty', display:''},  
   {value:'release', display:'Release Report'},
   {value:'reports', display:'Detail Report'},
   {value:'terminated', display:'Terminated Report'},
  ];

  constructor() { 
    this.selectedFilter='release';
  } 

  filterChanged(selectedValue:string){
    if(this.selectedFilter) {
       this.Terminated = false;
    } else {
    this.Release = false
   }
<select class="form-control" (change)="filterChanged($event.target.value)">
                  <option *ngFor="let type of filterTypes" [value]="type.value">{{type.display}}
                  </option>
                 </select>
                 
<div [hidden]="Terminated"><p>terminated content here</p></div>
<div [hidden]="Release"><p>release content here</p></div>

angular
3 Answers

In your code, you are checking selectedFilter to set the variables to true and false, but the value of this variable is only set in the constructor. Due to which the change in the select drop down is not having any affect.

You may change your code to the below,

component.html

<select class="form-control" [(ngModel)]="selectedFilter">
  <option *ngFor="let type of filterTypes" [value]="type.value">
    {{type.display}}
  </option>
</select>
                 
<div [hidden]="selectedFilter !== 'terminated'"><p>terminated content here</p></div>
<div [hidden]="selectedFilter !== 'release'"><p>release content here</p></div>
<div [hidden]="selectedFilter !== 'reports'"><p>detailed report content here</p></div>

component.ts

 selectedFilter:string;
 public filterTypes = [
   {value:'empty', display:''},  
   {value:'release', display:'Release Report'},
   {value:'reports', display:'Detail Report'},
   {value:'terminated', display:'Terminated Report'},
  ];

  constructor() { 
    this.selectedFilter = 'release';
  }
user_27723000

Try to use *ngIf directive. Besides of that, I think your code has some logic problems, I'll suggest you do some corrections:

 public terminated = false; 
 public release = true;

selectedFilter:string;
   public filterTypes = [
   {value:'empty', display:''},  
   {value:'release', display:'Release Report'},
   {value:'reports', display:'Detail Report'},
   {value:'terminated', display:'Terminated Report'},
  ];

  constructor() { 
    this.selectedFilter='release';
  } 

  filterChanged(_selectedValue:string){
    if(_selectedValue == 'release') {
       this.terminated = false;
       this.release = true;
    } else {
    this.release = false;
    this.termintated = true;
   }

Then use ngIf in your html:

<select class="form-control" (change)="filterChanged($event.target.value)">
                  <option *ngFor="let type of filterTypes" [value]="type.value">{{type.display}}
                  </option>
                 </select>
                 
<div *ngIf="terminated"<p>terminated content here</p></div>
<div *ngIf="release"><p>release content here</p></div>
user_82396970

Well firstly the condition will always be true no matter what - a string value will always evaluate true. Secondly, it may be better to use simple [(ngModel)] on the input and display content using ngSwitch on ngContainer like this:

<select [(ngModel)]="selectedOption" [ngModelOptions]="{standalone: true}">
<option *ngFor="let type of filterTypes" [value]="type.value">{{type.display}}</option>
</select>
<ng-container [ngSwitch]="selectedOption">
  <ng-container *ngSwitchCase="release">release..</ng-container>
</ng-container>
user_87758800
Related