Angular: If this option in dropdown show this div

Question

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>

Check this https://stackoverflow.com/questions/46000950/angular-4-setting-selected-option-in-dropdown — vishnu sandhireddy, Jun 28 '20 at 16:26
Thanks for all the help, everyone! I have it working now via the first solution! — paul798, Jun 28 '20 at 17:11

score 2 · Accepted Answer · answered Jun 28 '20 at 16:40

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';
  }

Great answer and thank you! Curious, as Im new to Angular, yet know jQuery fairly well. How do i add a delay or an animation to when a user chooses a new option and upon doing so slowly sees the their option appear below? Right now there's no visual distinction anything is really changing. — paul798, Jun 28 '20 at 17:28
You may defined the css class for the animation (display and collapse) and then use the css class like `[ngClass]="{'content-shown':selectedFilter === 'terminated','content-hidden':selectedFilter !== 'terminated'}"` — Ani, Jun 28 '20 at 18:03

score 1 · Answer 2 · answered Jun 28 '20 at 16:49

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>

score 0 · Answer 3 · answered Jun 28 '20 at 16:36

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>

Angular: If this option in dropdown show this div

3 Answers3