docs(input): add example of a clearable input

Author: mmalerba

src/material-examples/example-module.ts

@@ -11,9 +11,7 @@ import {
   PizzaPartyComponent,
   SnackBarComponentExample
 } from './snack-bar-component/snack-bar-component-example';
-import {
-  ProgressBarConfigurableExample
-} from './progress-bar-configurable/progress-bar-configurable-example';
+import {ProgressBarConfigurableExample} from './progress-bar-configurable/progress-bar-configurable-example';
 import {
   DialogOverviewExample,
   DialogOverviewExampleDialog
@@ -30,9 +28,7 @@ import {SlideToggleOverviewExample} from './slide-toggle-overview/slide-toggle-o
 import {SlideToggleFormsExample} from './slide-toggle-forms/slide-toggle-forms-example';
 import {MenuOverviewExample} from './menu-overview/menu-overview-example';
 import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example';
-import {
-  ButtonToggleExclusiveExample
-} from './button-toggle-exclusive/button-toggle-exclusive-example';
+import {ButtonToggleExclusiveExample} from './button-toggle-exclusive/button-toggle-exclusive-example';
 import {ListSectionsExample} from './list-sections/list-sections-example';
 import {SnackBarOverviewExample} from './snack-bar-overview/snack-bar-overview-example';
 import {
@@ -47,20 +43,14 @@ import {TooltipOverviewExample} from './tooltip-overview/tooltip-overview-exampl
 import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example';
 import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example';
 import {TooltipPositionExample} from './tooltip-position/tooltip-position-example';
-import {
-  ProgressSpinnerConfigurableExample
-} from './progress-spinner-configurable/progress-spinner-configurable-example';
+import {ProgressSpinnerConfigurableExample} from './progress-spinner-configurable/progress-spinner-configurable-example';
 import {ListOverviewExample} from './list-overview/list-overview-example';
 import {SliderOverviewExample} from './slider-overview/slider-overview-example';
-import {
-  SlideToggleConfigurableExample
-} from './slide-toggle-configurable/slide-toggle-configurable-example';
+import {SlideToggleConfigurableExample} from './slide-toggle-configurable/slide-toggle-configurable-example';
 import {IconSvgExample} from './icon-svg-example/icon-svg-example';
 import {SidenavFabExample} from './sidenav-fab/sidenav-fab-example';
 import {CardOverviewExample} from './card-overview/card-overview-example';
-import {
-  ProgressSpinnerOverviewExample
-} from './progress-spinner-overview/progress-spinner-overview-example';
+import {ProgressSpinnerOverviewExample} from './progress-spinner-overview/progress-spinner-overview-example';
 import {TabsTemplateLabelExample} from './tabs-template-label/tabs-template-label-example';
 import {RadioOverviewExample} from './radio-overview/radio-overview-example';
 import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example';
@@ -70,22 +60,42 @@ import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
 import {SelectFormExample} from './select-form/select-form-example';
 import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example';
 import {DatepickerOverviewExample} from './datepicker-overview/datepicker-overview-example';
-import {
-  PaginatorConfigurableExample
-} from './paginator-configurable/paginator-configurable-example';
+import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example';
 import {InputOverviewExample} from './input-overview/input-overview-example';
 import {InputErrorsExample} from './input-errors/input-errors-example';
 import {InputFormExample} from './input-form/input-form-example';
 import {InputPrefixSuffixExample} from './input-prefix-suffix/input-prefix-suffix-example';
 import {InputHintExample} from './input-hint/input-hint-example';
+import {InputClearableExample} from './input-clearable/input-clearable-example';
 import {
-  MdAutocompleteModule, MdButtonModule, MdButtonToggleModule, MdCardModule, MdCheckboxModule,
-  MdChipsModule, MdDatepickerModule, MdDialogModule, MdGridListModule, MdIconModule, MdInputModule,
-  MdListModule, MdMenuModule, MdPaginatorModule, MdProgressBarModule, MdProgressSpinnerModule,
-  MdRadioModule, MdSelectModule, MdSidenavModule, MdSliderModule, MdSlideToggleModule,
-  MdSnackBarModule, MdTabsModule, MdToolbarModule, MdTooltipModule
+  MdAutocompleteModule,
+  MdButtonModule,
+  MdButtonToggleModule,
+  MdCardModule,
+  MdCheckboxModule,
+  MdChipsModule,
+  MdDatepickerModule,
+  MdDialogModule,
+  MdGridListModule,
+  MdIconModule,
+  MdInputModule,
+  MdListModule,
+  MdMenuModule,
+  MdPaginatorModule,
+  MdProgressBarModule,
+  MdProgressSpinnerModule,
+  MdRadioModule,
+  MdSelectModule,
+  MdSidenavModule,
+  MdSliderModule,
+  MdSlideToggleModule,
+  MdSnackBarModule,
+  MdTabsModule,
+  MdToolbarModule,
+  MdTooltipModule
 } from '@angular/material';
 
+
 export interface LiveExample {
   title: string;
   component: any;
@@ -136,6 +146,7 @@ export const EXAMPLE_COMPONENTS = {
   'grid-list-overview': {title: 'Basic grid-list', component: GridListOverviewExample},
   'icon-overview': {title: 'Basic icons', component: IconOverviewExample},
   'icon-svg': {title: 'SVG icons', component: IconSvgExample},
+  'input-clearable': {title: 'Input with clear button', component: InputClearableExample},
   'input-form': {title: 'Inputs in a form', component: InputFormExample},
   'input-overview': {title: 'Basic inputs', component: InputOverviewExample},
   'input-errors': {title: 'Input Errors', component: InputErrorsExample},
@@ -251,6 +262,7 @@ export const EXAMPLE_LIST = [
   GridListOverviewExample,
   IconOverviewExample,
   IconSvgExample,
+  InputClearableExample,
   InputFormExample,
   InputOverviewExample,
   InputPrefixSuffixExample,

src/material-examples/input-clearable/input-clearable-example.css

@@ -0,0 +1,3 @@
+.example-input-container {
+  width: 200px;
+}

src/material-examples/input-clearable/input-clearable-example.html

@@ -0,0 +1,4 @@
+<md-input-container class="example-input-container">
+  <input mdInput type="text" placeholder="Clearable input" [(ngModel)]="value"/>
+  <md-icon mdSuffix *ngIf="value" (click)="value=''">close</md-icon>
+</md-input-container>

src/material-examples/input-clearable/input-clearable-example.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'input-clearable-example',
+  templateUrl: './input-clearable-example.html',
+  styleUrls: ['./input-clearable-example.css'],
+})
+export class InputClearableExample {
+  value = 'Clear me';
+}