Angular 2
Diseño de material angular

Md2Seleccionar

Componente :

<md2-select [(ngModel)]="item" (change)="change($event)" [disabled]="disabled">
<md2-option *ngFor="let i of items" [value]="i.value" [disabled]="i.disabled">
{{i.name}}</md2-option>
</md2-select>

Seleccione permitir al usuario seleccionar la opción de las opciones.

<md2-select></md2-select>
<md2-option></md2-option>
<md2-select-header></md2-select-header>

Md2Tooltip

La información sobre herramientas es una directiva, permite al usuario mostrar texto de sugerencias mientras el mouse del usuario se desplaza sobre un elemento.

Una información sobre herramientas tendría el siguiente marcado.

<span tooltip-direction="left" tooltip="On the Left!">Left</span>
<button tooltip="some message"
    tooltip-position="below"
    tooltip-delay="1000">Hover Me
</button>

Md2Toast

Toast es un servicio que muestra notificaciones en la vista.

Crea y muestra una simple noticia de brindis.

import {Md2Toast} from 'md2/toast/toast';

@Component({
 selector: "..."
})

export class ... {

...
constructor(private toast: Md2Toast) { }
toastMe() {
this.toast.show('Toast message...');

---  or  ---

this.toast.show('Toast message...', 1000);
}

...

}

Md2Datepicker

Selector de fecha permite al usuario seleccionar fecha y hora.

<md2-datepicker [(ngModel)]="date"></md2-datepicker>

ver para más detalles aquí

Md2Accordion y Md2Collapse

Md2Collapse : Colapso es una directiva, permite al usuario cambiar la visibilidad de la sección.

Ejemplos

Un colapso tendría el siguiente marcado.

<div [collapse]="isCollapsed">
  Lorum Ipsum Content
</div>

Md2Accordion : El acordeón permite al usuario cambiar la visibilidad de las múltiples secciones.

Ejemplos

Un acordeón tendría el siguiente marcado.

<md2-accordion [multiple]="multiple">
  <md2-accordion-tab *ngFor="let tab of accordions" 
                     [header]="tab.title" 
                     [active]="tab.active" 
                     [disabled]="tab.disabled">
    {{tab.content}}
  </md2-accordion-tab>
  <md2-accordion-tab>
    <md2-accordion-header>Custom Header</md2-accordion-header>
    test content
  </md2-accordion-tab>
</md2-accordion>