Skip to content

Commit b840d14

Browse files
committed
docs(input): add example of a clearable input
1 parent b4e8c7d commit b840d14

File tree

4 files changed

+21
-0
lines changed

4 files changed

+21
-0
lines changed
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.example-input-container {
2+
width: 200px;
3+
}
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<md-input-container class="example-input-container">
2+
<input mdInput type="text" placeholder="Clearable input" [(ngModel)]="value"/>
3+
<md-icon mdSuffix *ngIf="value" (click)="value=''">close</md-icon>
4+
</md-input-container>
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {Component} from '@angular/core';
2+
3+
4+
@Component({
5+
selector: 'input-clearable-example',
6+
templateUrl: './input-clearable-example.html',
7+
styleUrls: ['./input-clearable-example.css'],
8+
})
9+
export class InputClearableExample {
10+
value = 'Clear me';
11+
}

src/material-examples/example-module.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ import {SelectOverviewExample} from './select-overview/select-overview-example';
7070
import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
7171
import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
7272
import {SelectFormExample} from './select-form/select-form-example';
73+
import {InputClearableExample} from './input-clearable/input-clearable-example';
7374

7475

7576
export interface LiveExample {
@@ -121,6 +122,7 @@ export const EXAMPLE_COMPONENTS = {
121122
'grid-list-overview': {title: 'Basic grid-list', component: GridListOverviewExample},
122123
'icon-overview': {title: 'Basic icons', component: IconOverviewExample},
123124
'icon-svg': {title: 'SVG icons', component: IconSvgExample},
125+
'input-clearable': {title: 'Input with clear button', component: InputClearableExample},
124126
'input-form': {title: 'Inputs in a form', component: InputFormExample},
125127
'input-overview': {title: 'Basic inputs', component: InputOverviewExample},
126128
'list-overview': {title: 'Basic list', component: ListOverviewExample},
@@ -192,6 +194,7 @@ export const EXAMPLE_LIST = [
192194
GridListOverviewExample,
193195
IconOverviewExample,
194196
IconSvgExample,
197+
InputClearableExample,
195198
InputFormExample,
196199
InputOverviewExample,
197200
ListOverviewExample,

0 commit comments

Comments
 (0)