How to Hide/Show Drop Down Angular2 Material?

Question

My HTML

<mat-form-field class="button-spacing">
 <mat-select placeholder="select" [(ngModel)]="dropDownOne">
  <mat-option *ngFor="let first of test1" [value]="first"> {{ first }}
  </mat-option>
 </mat-select>
</mat-form-field>
<mat-form-field class="button-spacing">
 <mat-select placeholder="select" [(ngModel)]="DropDownTwo" (change)="on()" [hidden]="show" [disabled]="dropDownOne== 'One'||dropDownOne == undefined ">
  <mat-option *ngFor="let second of test2" [value]="second"> {{ second }}
  </mat-option>

 </mat-select>
</mat-form-field>

My TS

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';



/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
test1 =[
  'One',
  'Two'
]
test2 =[
  1,2,3,4
]
show :boolean = true;


on(){

        this.show = !this.show;
}

}

How to Hide/Show Drop Down here.! in First drop down i have option like "One" & "Two" when i clicked on One the second drop down must get hidden not disabled, and when i clicked on option "Two" from drop down first the second drop down will be shown to us How??

here it is my StackBliz Link -- > https://stackblitz.com/edit/drow-down-disabled12345677709-gfj1-gxqswz

score 2 · Answer 1 · answered Feb 12 '19 at 07:39

Just add a *ngIf="dropDownOne === 'One'" to your bottom drop down. Also change the wrapper from mat-form-field to a div or else Angular will complain in case the bottom select list is not displayed.

Give this a try:

<mat-form-field 
  class="button-spacing">
    <mat-select 
      placeholder="select" 
      [(ngModel)]="dropDownOne">
        <mat-option 
          *ngFor="let first of test1" 
          [value]="first">
          {{ first }}
        </mat-option>
    </mat-select>
</mat-form-field>
<div class="button-spacing">
    <mat-select 
      placeholder="select" 
      [(ngModel)]="DropDownTwo" 
      (change)="on()" 
      *ngIf="dropDownOne === 'One'">
      <mat-option 
        *ngFor="let second of test2" 
        [value]="second">
        {{ second }}
      </mat-option>

    </mat-select>
</div>

Here's a Working Sample StackBlitz for your ref.

Sivaramakrishnan · Answer 2 · 2019-02-12T07:35:42.133

change your code like this

<mat-form-field class="button-spacing">
    <mat-select placeholder="select" [(ngModel)]="dropDownOne">
        <mat-option *ngFor="let first of test1" [value]="first"> {{ first }}
        </mat-option>
    </mat-select>
</mat-form-field>
<mat-form-field class="button-spacing">
    <mat-select placeholder="select" [(ngModel)]="DropDownTwo" *ngIf="dropDownOne=='Two'">
        <mat-option *ngFor="let second of test2" [value]="second"> {{ second }}
        </mat-option>

    </mat-select>
</mat-form-field>

The *ngIf directive is used to show/hide the element from the DOM.*ngIf="dropDownOne=='Two'" shows the selectbox when the dropdown value is 'Two'

Gustavo Morais · Accepted Answer · 2019-02-12T08:16:25.210

You could use ngIf to hide the second element according to the selection of the first one.

<mat-form-field class="button-spacing">
    <mat-select placeholder="select" [(ngModel)]="dropDownOne">
        <mat-option *ngFor="let first of test1" [value]="first"> {{ first }}
        </mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field *ngIf="dropDownOne=='Two'" class="button-spacing">
    <mat-select placeholder="select" [(ngModel)]="DropDownTwo" (change)="on()" [hidden]="show" [disabled]="dropDownOne== 'One'||dropDownOne == undefined ">
        <mat-option *ngFor="let second of test2" [value]="second"> {{ second }}
        </mat-option>
    </mat-select>
</mat-form-field>

Attention: It's important to put the *ngIf in the mat-form-field tag.

Here's a Stackblitz demo for your reference

Additional info: depending on how you're going to user your second array you might want to check out when to use ngIf and ngShow/ngHige here. Basically ngIf completly removes from the DOM, so sometimes you just want to hide it.

score 0 · Answer 4 · answered Feb 12 '19 at 17:10

You can use hidden property to hide the second drop down. Just place your change function into the first drop down. Hidden property will hide the down down from the view not form the dom. hidden has some issues though because it can conflict with CSS for the display property. I have tested in Chrome Version 72.0.3626.96

To fix it just add in your style:

[hidden] { display: none !important;}

My HTML code:

<mat-form-field class="button-spacing">
    <mat-select placeholder="select" [(ngModel)]="dropDownOne" 
    (selectionChange)="on($event.value)">
        <mat-option *ngFor="let first of test1" [value]="first"> {{ first }}
        </mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field class="button-spacing" [hidden]="hideDropDown">
    <mat-select placeholder="select" [(ngModel)]="DropDownTwo">
       <mat-option *ngFor="let second of test2" [value]="second"> {{ second }}
       </mat-option>
    </mat-select>
</mat-form-field>

My ts code

hideDropDown: boolean;
test1 = [
'One',
'Two'
];

test2 = [
1, 2, 3, 4
];

on(value) {
    if (value === 'One') {
       this.hideDropDown = true;
    } else {
      this.hideDropDown = false;
    }
}

How to Hide/Show Drop Down Angular2 Material?

4 Answers4