title: How to Hide/Show Drop Down Angular2 Material?
body: <p>My HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-form-field class="button-spacing"&gt;
   &lt;mat-select placeholder="select" [(ngModel)]="dropDownOne"&gt;
    &lt;mat-option *ngFor="let first of test1" [value]="first"&gt; {{ first }}
    &lt;/mat-option&gt;
   &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  &lt;mat-form-field class="button-spacing"&gt;
   &lt;mat-select placeholder="select" [(ngModel)]="DropDownTwo" (change)="on()" [hidden]="show" [disabled]="dropDownOne== 'One'||dropDownOne == undefined "&gt;
    &lt;mat-option *ngFor="let second of test2" [value]="second"&gt; {{ second }}
    &lt;/mat-option&gt;
  
   &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My TS</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { MatTableDataSource } from '@angular/material';
  
  
  
  /**
   * @title Basic use of `&lt;table mat-table&gt;`
   */
  @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;
  }
  
  }
  </code></pre>
  
  <p>How to Hide/Show Drop Down here.!
  in First drop down i have  option like "One" &amp; "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??</p>
  
  <p>here it is my StackBliz Link -- > <a href="https://stackblitz.com/edit/drow-down-disabled12345677709-gfj1-gxqswz" rel="nofollow noreferrer">https://stackblitz.com/edit/drow-down-disabled12345677709-gfj1-gxqswz</a></p>