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.

```js
 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
   }
```

```html
<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>
```

Answer: 
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>

```
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>

```