How to set md-select panel to be open by default

问题

I am using angular4 with Redux and angular material to design my web page. I am trying to set the md-select panel to be open. example scenario: click button dispatches an action to open the select panel opens to dispaly all options.

I am using redux actions to manipulate my components state. So basically I need to fire an action to set the select to open.

Any suggestions?

回答1:

Using the Material2 example as starting point for this answer. Here is how you can do that:

Give an id to your panel, e.g. mySelect

<md-select placeholder="Favorite food" #mySelect>
  <md-option *ngFor="let food of foods" [value]="food.value">
    {{ food.viewValue }}
  </md-option>
</md-select>

... then change your component class:

import {Component, ViewChild, AfterViewInit } from '@angular/core';
import {MdSelect} from '@angular/material';

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
})
export class SelectOverviewExample implements AfterViewInit {
  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  @ViewChild('mySelect') mySelect: MdSelect;

  ngAfterViewInit(){
      this.mySelect.open();
  }
}

Plunker link here: PLUNKER DEMO

回答2:

This example shows you how to subscribe to state so that the drop down will be whatever the current state is. So change initialState to be true if you want it initially open.

There is a button that dispatches the toggle state action to open the drop down.

This can be modified to toggle or create separate open/close buttons or whatever you need.

state.ts

export interface AppState {
  isDropDownOpen: boolean
}

const initialState: AppState = {
  isDropDownOpen: false;
};

export function appReducer(
  state: AppState = initialState,
  action: any
): AppState {
  switch (action.type) {
    case 'toggleSelect': {
      state.isDropDownOpen = action.payload
      return state;
    }
    default: {
      return state;
    }
  }
}

my-component.ts

import {Component, ViewChild, AfterViewInit } from '@angular/core';
import {MdSelect} from '@angular/material';

@Component({
  selector: 'my-component',
  template: `
    <md-select placeholder="Favorite food" #mySelect>
      <md-option *ngFor="let food of foods" [value]="food.value">
        {{ food.viewValue }}
      </md-option>
    </md-select>
    <button (click)="openSelect()"> Open Select </button>
`,
})
export class SelectOverviewExample implements AfterViewInit {
  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  @ViewChild('mySelect') mySelect: MdSelect;

  controller( private store: Store<AppState>){
    store.select(state => state.isDropDownOpen).subscribe(isDropDownOpen => {
      if(isDropDownOpen){
        this.mySelect.open()
      } else {
        this.mySelect.close()
      }
    })
  }

  openSelect(){
    this.store.dispatch({ type: toggleSelect, payload: true })
  }

}