mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-09 20:15:07 +00:00
Updated existing Angular Material examples
This commit is contained in:
sercan
parent
f1e1ddc236
commit
7ec117202d
|
|
@ -27,7 +27,7 @@ export class AutocompleteDisplayExample implements OnInit {
|
|||
ngOnInit() {
|
||||
this.filteredOptions = this.myControl.valueChanges
|
||||
.pipe(
|
||||
startWith<string | User>(''),
|
||||
startWith(''),
|
||||
map(value => typeof value === 'string' ? value : value.name),
|
||||
map(name => name ? this._filter(name) : this.options.slice())
|
||||
);
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export const _filter = (opt: string[], value: string): string[] => {
|
|||
})
|
||||
|
||||
export class AutocompleteOptgroupExample implements OnInit {
|
||||
stateForm: FormGroup = this.fb.group({
|
||||
stateForm: FormGroup = this._formBuilder.group({
|
||||
stateGroup: '',
|
||||
});
|
||||
|
||||
|
|
@ -91,7 +91,7 @@ export class AutocompleteOptgroupExample implements OnInit {
|
|||
|
||||
stateGroupOptions: Observable<StateGroup[]>;
|
||||
|
||||
constructor(private fb: FormBuilder) {}
|
||||
constructor(private _formBuilder: FormBuilder) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges
|
||||
|
|
|
|||
|
|
@ -13,5 +13,9 @@
|
|||
<p>
|
||||
Icon with a badge
|
||||
<mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
|
||||
<!-- Include text description of the icon's meaning for screen-readers -->
|
||||
<span class="cdk-visually-hidden">
|
||||
Example with a home icon with overlaid badge showing the number 15
|
||||
</span>
|
||||
</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {MatBottomSheet, MatBottomSheetRef} from '@angular/material';
|
||||
import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';
|
||||
|
||||
/**
|
||||
* @title Bottom Sheet Overview
|
||||
|
|
@ -10,10 +10,10 @@ import {MatBottomSheet, MatBottomSheetRef} from '@angular/material';
|
|||
styleUrls: ['bottom-sheet-overview-example.css'],
|
||||
})
|
||||
export class BottomSheetOverviewExample {
|
||||
constructor(private bottomSheet: MatBottomSheet) {}
|
||||
constructor(private _bottomSheet: MatBottomSheet) {}
|
||||
|
||||
openBottomSheet(): void {
|
||||
this.bottomSheet.open(BottomSheetOverviewExampleSheet);
|
||||
this._bottomSheet.open(BottomSheetOverviewExampleSheet);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -22,10 +22,10 @@ export class BottomSheetOverviewExample {
|
|||
templateUrl: 'bottom-sheet-overview-example-sheet.html',
|
||||
})
|
||||
export class BottomSheetOverviewExampleSheet {
|
||||
constructor(private bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}
|
||||
constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}
|
||||
|
||||
openLink(event: MouseEvent): void {
|
||||
this.bottomSheetRef.dismiss();
|
||||
this._bottomSheetRef.dismiss();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
/** No CSS for this example */
|
||||
mat-button-toggle-group {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<mat-button-toggle-group #group="matButtonToggleGroup">
|
||||
<mat-button-toggle value="left">
|
||||
<mat-button-toggle value="left" aria-label="Text align left">
|
||||
<mat-icon>format_align_left</mat-icon>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle value="center">
|
||||
<mat-button-toggle value="center" aria-label="Text align center">
|
||||
<mat-icon>format_align_center</mat-icon>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle value="right">
|
||||
<mat-button-toggle value="right" aria-label="Text align right">
|
||||
<mat-icon>format_align_right</mat-icon>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle value="justify" disabled>
|
||||
<mat-button-toggle value="justify" disabled aria-label="Text align justify">
|
||||
<mat-icon>format_align_justify</mat-icon>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
|
|
|
|||
|
|
@ -40,20 +40,20 @@
|
|||
|
||||
<h3>Icon Buttons</h3>
|
||||
<div class="example-button-row">
|
||||
<button mat-icon-button>
|
||||
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
|
||||
<button mat-icon-button aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="primary">
|
||||
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
|
||||
<button mat-icon-button color="primary" aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="accent">
|
||||
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
|
||||
<button mat-icon-button color="accent" aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="warn">
|
||||
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
|
||||
<button mat-icon-button color="warn" aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button disabled>
|
||||
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
|
||||
<button mat-icon-button disabled aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -64,8 +64,8 @@
|
|||
<button mat-fab color="accent">Accent</button>
|
||||
<button mat-fab color="warn">Warn</button>
|
||||
<button mat-fab disabled>Disabled</button>
|
||||
<button mat-fab>
|
||||
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
|
||||
<button mat-fab aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<a mat-fab routerLink=".">Link</a>
|
||||
</div>
|
||||
|
|
@ -77,8 +77,8 @@
|
|||
<button mat-mini-fab color="accent">Accent</button>
|
||||
<button mat-mini-fab color="warn">Warn</button>
|
||||
<button mat-mini-fab disabled>Disabled</button>
|
||||
<button mat-mini-fab>
|
||||
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
|
||||
<button mat-mini-fab aria-label="Example icon-button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<a mat-mini-fab routerLink=".">Link</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<mat-form-field class="example-chip-list">
|
||||
<mat-chip-list #chipList>
|
||||
<mat-chip-list #chipList aria-label="Fruit selection">
|
||||
<mat-chip
|
||||
*ngFor="let fruit of fruits"
|
||||
[selectable]="selectable"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import {COMMA, ENTER} from '@angular/cdk/keycodes';
|
||||
import {Component, ElementRef, ViewChild} from '@angular/core';
|
||||
import {FormControl} from '@angular/forms';
|
||||
import {MatAutocompleteSelectedEvent, MatChipInputEvent, MatAutocomplete} from '@angular/material';
|
||||
import {MatAutocompleteSelectedEvent, MatAutocomplete} from '@angular/material/autocomplete';
|
||||
import {MatChipInputEvent} from '@angular/material/chips';
|
||||
import {Observable} from 'rxjs';
|
||||
import {map, startWith} from 'rxjs/operators';
|
||||
|
||||
|
|
@ -24,8 +25,8 @@ export class ChipsAutocompleteExample {
|
|||
fruits: string[] = ['Lemon'];
|
||||
allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];
|
||||
|
||||
@ViewChild('fruitInput') fruitInput: ElementRef<HTMLInputElement>;
|
||||
@ViewChild('auto') matAutocomplete: MatAutocomplete;
|
||||
@ViewChild('fruitInput', {static: false}) fruitInput: ElementRef<HTMLInputElement>;
|
||||
@ViewChild('auto', {static: false}) matAutocomplete: MatAutocomplete;
|
||||
|
||||
constructor() {
|
||||
this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<mat-form-field class="example-chip-list">
|
||||
<mat-chip-list #chipList>
|
||||
<mat-chip-list #chipList aria-label="Fruit selection">
|
||||
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
|
||||
[removable]="removable" (removed)="remove(fruit)">
|
||||
{{fruit.name}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {COMMA, ENTER} from '@angular/cdk/keycodes';
|
||||
import {Component} from '@angular/core';
|
||||
import {MatChipInputEvent} from '@angular/material';
|
||||
import {MatChipInputEvent} from '@angular/material/chips';
|
||||
|
||||
export interface Fruit {
|
||||
name: string;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<mat-chip-list>
|
||||
<mat-chip-list aria-label="Fish selection">
|
||||
<mat-chip>One fish</mat-chip>
|
||||
<mat-chip>Two fish</mat-chip>
|
||||
<mat-chip color="primary" selected>Primary fish</mat-chip>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<mat-chip-list class="mat-chip-list-stacked">
|
||||
<mat-chip-list class="mat-chip-list-stacked" aria-label="Color selection">
|
||||
<mat-chip *ngFor="let chip of availableColors" selected [color]="chip.color">
|
||||
{{chip.name}}
|
||||
</mat-chip>
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
/** No CSS for this example */
|
||||
mat-form-field {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
/** No CSS for this example */
|
||||
mat-form-field {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,10 @@ import {
|
|||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
Host,
|
||||
Inject,
|
||||
OnDestroy
|
||||
} from '@angular/core';
|
||||
import {MatCalendar} from '@angular/material';
|
||||
import {MatCalendar} from '@angular/material/datepicker';
|
||||
import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
|
||||
import {Subject} from 'rxjs';
|
||||
import {takeUntil} from 'rxjs/operators';
|
||||
|
|
@ -64,37 +63,36 @@ export class DatepickerCustomHeaderExample {
|
|||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ExampleHeader<D> implements OnDestroy {
|
||||
private destroyed = new Subject<void>();
|
||||
private _destroyed = new Subject<void>();
|
||||
|
||||
constructor(@Host() private calendar: MatCalendar<D>,
|
||||
private dateAdapter: DateAdapter<D>,
|
||||
@Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
|
||||
cdr: ChangeDetectorRef) {
|
||||
calendar.stateChanges
|
||||
.pipe(takeUntil(this.destroyed))
|
||||
constructor(
|
||||
private _calendar: MatCalendar<D>, private _dateAdapter: DateAdapter<D>,
|
||||
@Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats, cdr: ChangeDetectorRef) {
|
||||
_calendar.stateChanges
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
.subscribe(() => cdr.markForCheck());
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroyed.next();
|
||||
this.destroyed.complete();
|
||||
this._destroyed.next();
|
||||
this._destroyed.complete();
|
||||
}
|
||||
|
||||
get periodLabel() {
|
||||
return this.dateAdapter
|
||||
.format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel)
|
||||
return this._dateAdapter
|
||||
.format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
|
||||
.toLocaleUpperCase();
|
||||
}
|
||||
|
||||
previousClicked(mode: 'month' | 'year') {
|
||||
this.calendar.activeDate = mode === 'month' ?
|
||||
this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) :
|
||||
this.dateAdapter.addCalendarYears(this.calendar.activeDate, -1);
|
||||
this._calendar.activeDate = mode === 'month' ?
|
||||
this._dateAdapter.addCalendarMonths(this._calendar.activeDate, -1) :
|
||||
this._dateAdapter.addCalendarYears(this._calendar.activeDate, -1);
|
||||
}
|
||||
|
||||
nextClicked(mode: 'month' | 'year') {
|
||||
this.calendar.activeDate = mode === 'month' ?
|
||||
this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) :
|
||||
this.dateAdapter.addCalendarYears(this.calendar.activeDate, 1);
|
||||
this._calendar.activeDate = mode === 'month' ?
|
||||
this._dateAdapter.addCalendarMonths(this._calendar.activeDate, 1) :
|
||||
this._dateAdapter.addCalendarYears(this._calendar.activeDate, 1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
/** No CSS for this example */
|
||||
mat-form-field {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,9 +20,9 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
|
|||
],
|
||||
})
|
||||
export class DatepickerLocaleExample {
|
||||
constructor(private adapter: DateAdapter<any>) {}
|
||||
constructor(private _adapter: DateAdapter<any>) {}
|
||||
|
||||
french() {
|
||||
this.adapter.setLocale('fr');
|
||||
this._adapter.setLocale('fr');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
/** No CSS for this example */
|
||||
mat-form-field {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,9 +53,9 @@ export class DatepickerViewsSelectionExample {
|
|||
this.date.setValue(ctrlValue);
|
||||
}
|
||||
|
||||
chosenMonthHandler(normlizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
|
||||
chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
|
||||
const ctrlValue = this.date.value;
|
||||
ctrlValue.month(normlizedMonth.month());
|
||||
ctrlValue.month(normalizedMonth.month());
|
||||
this.date.setValue(ctrlValue);
|
||||
datepicker.close();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {MatDialog} from '@angular/material';
|
||||
import {MatDialog} from '@angular/material/dialog';
|
||||
|
||||
/**
|
||||
* @title Dialog with header, scrollable content and actions
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component, Inject} from '@angular/core';
|
||||
import {MatDialog, MAT_DIALOG_DATA} from '@angular/material';
|
||||
import {MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';
|
||||
|
||||
export interface DialogData {
|
||||
animal: 'panda' | 'unicorn' | 'lion';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {MatDialog} from '@angular/material';
|
||||
import {MatDialog} from '@angular/material/dialog';
|
||||
|
||||
/**
|
||||
* @title Dialog elements
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component, Inject} from '@angular/core';
|
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
|
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
|
||||
|
||||
export interface DialogData {
|
||||
animal: string;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component, ViewChild} from '@angular/core';
|
||||
import {MatAccordion} from '@angular/material';
|
||||
import {MatAccordion} from '@angular/material/expansion';
|
||||
|
||||
/**
|
||||
* @title Accordion with expand/collapse all toggles
|
||||
|
|
@ -10,5 +10,5 @@ import {MatAccordion} from '@angular/material';
|
|||
styleUrls: ['expansion-expand-collapse-all-example.css'],
|
||||
})
|
||||
export class ExpansionExpandCollapseAllExample {
|
||||
@ViewChild(MatAccordion) accordion: MatAccordion;
|
||||
@ViewChild(MatAccordion, {static: false}) accordion: MatAccordion;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,3 +7,7 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,3 +17,7 @@
|
|||
.example-focus-monitor .cdk-program-focused {
|
||||
background: rgba(255, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export class FocusMonitorDirectivesExample {
|
|||
elementOrigin = this.formatOrigin(null);
|
||||
subtreeOrigin = this.formatOrigin(null);
|
||||
|
||||
constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {}
|
||||
constructor(private _ngZone: NgZone, private _cdr: ChangeDetectorRef) {}
|
||||
|
||||
|
||||
formatOrigin(origin: FocusOrigin): string {
|
||||
|
|
@ -20,6 +20,6 @@ export class FocusMonitorDirectivesExample {
|
|||
|
||||
// Workaround for the fact that (cdkFocusChange) emits outside NgZone.
|
||||
markForCheck() {
|
||||
this.ngZone.run(() => this.cdr.markForCheck());
|
||||
this._ngZone.run(() => this._cdr.markForCheck());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,3 +21,8 @@
|
|||
.example-focus-monitor button:focus {
|
||||
box-shadow: 0 0 30px cyan;
|
||||
}
|
||||
|
||||
mat-form-field,
|
||||
button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
|
||||
import {
|
||||
AfterViewInit,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
NgZone,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
|
||||
|
|
@ -15,20 +15,20 @@ import {
|
|||
templateUrl: 'focus-monitor-focus-via-example.html',
|
||||
styleUrls: ['focus-monitor-focus-via-example.css']
|
||||
})
|
||||
export class FocusMonitorFocusViaExample implements OnDestroy, OnInit {
|
||||
@ViewChild('monitored') monitoredEl: ElementRef<HTMLElement>;
|
||||
export class FocusMonitorFocusViaExample implements OnDestroy, AfterViewInit {
|
||||
@ViewChild('monitored', {static: false}) monitoredEl: ElementRef<HTMLElement>;
|
||||
|
||||
origin = this.formatOrigin(null);
|
||||
|
||||
constructor(public focusMonitor: FocusMonitor,
|
||||
private cdr: ChangeDetectorRef,
|
||||
private ngZone: NgZone) {}
|
||||
private _cdr: ChangeDetectorRef,
|
||||
private _ngZone: NgZone) {}
|
||||
|
||||
ngOnInit() {
|
||||
ngAfterViewInit() {
|
||||
this.focusMonitor.monitor(this.monitoredEl)
|
||||
.subscribe(origin => this.ngZone.run(() => {
|
||||
.subscribe(origin => this._ngZone.run(() => {
|
||||
this.origin = this.formatOrigin(origin);
|
||||
this.cdr.markForCheck();
|
||||
this._cdr.markForCheck();
|
||||
}));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,3 +17,7 @@
|
|||
.example-focus-monitor .cdk-program-focused {
|
||||
background: rgba(255, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
|
||||
import {
|
||||
AfterViewInit,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
NgZone,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
|
||||
|
|
@ -15,33 +15,33 @@ import {
|
|||
templateUrl: 'focus-monitor-overview-example.html',
|
||||
styleUrls: ['focus-monitor-overview-example.css']
|
||||
})
|
||||
export class FocusMonitorOverviewExample implements OnDestroy, OnInit {
|
||||
@ViewChild('element') element: ElementRef<HTMLElement>;
|
||||
@ViewChild('subtree') subtree: ElementRef<HTMLElement>;
|
||||
export class FocusMonitorOverviewExample implements OnDestroy, AfterViewInit {
|
||||
@ViewChild('element', {static: false}) element: ElementRef<HTMLElement>;
|
||||
@ViewChild('subtree', {static: false}) subtree: ElementRef<HTMLElement>;
|
||||
|
||||
elementOrigin = this.formatOrigin(null);
|
||||
subtreeOrigin = this.formatOrigin(null);
|
||||
|
||||
constructor(private focusMonitor: FocusMonitor,
|
||||
private cdr: ChangeDetectorRef,
|
||||
private ngZone: NgZone) {}
|
||||
constructor(private _focusMonitor: FocusMonitor,
|
||||
private _cdr: ChangeDetectorRef,
|
||||
private _ngZone: NgZone) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.focusMonitor.monitor(this.element)
|
||||
.subscribe(origin => this.ngZone.run(() => {
|
||||
ngAfterViewInit() {
|
||||
this._focusMonitor.monitor(this.element)
|
||||
.subscribe(origin => this._ngZone.run(() => {
|
||||
this.elementOrigin = this.formatOrigin(origin);
|
||||
this.cdr.markForCheck();
|
||||
this._cdr.markForCheck();
|
||||
}));
|
||||
this.focusMonitor.monitor(this.subtree, true)
|
||||
.subscribe(origin => this.ngZone.run(() => {
|
||||
this._focusMonitor.monitor(this.subtree, true)
|
||||
.subscribe(origin => this._ngZone.run(() => {
|
||||
this.subtreeOrigin = this.formatOrigin(origin);
|
||||
this.cdr.markForCheck();
|
||||
this._cdr.markForCheck();
|
||||
}));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.focusMonitor.stopMonitoring(this.element);
|
||||
this.focusMonitor.stopMonitoring(this.subtree);
|
||||
this._focusMonitor.stopMonitoring(this.element);
|
||||
this._focusMonitor.stopMonitoring(this.subtree);
|
||||
}
|
||||
|
||||
formatOrigin(origin: FocusOrigin): string {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div [formGroup]="parts" class="example-tel-input-container">
|
||||
<input class="example-tel-input-element" formControlName="area" size="3">
|
||||
<input class="example-tel-input-element" formControlName="area" size="3" aria-label="Area code" (input)="_handleInput()">
|
||||
<span class="example-tel-input-spacer">–</span>
|
||||
<input class="example-tel-input-element" formControlName="exchange" size="3">
|
||||
<input class="example-tel-input-element" formControlName="exchange" size="3" aria-label="Exchange code" (input)="_handleInput()">
|
||||
<span class="example-tel-input-spacer">–</span>
|
||||
<input class="example-tel-input-element" formControlName="subscriber" size="4">
|
||||
<input class="example-tel-input-element" formControlName="subscriber" size="4" aria-label="Subscriber number" (input)="_handleInput()">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import {FocusMonitor} from '@angular/cdk/a11y';
|
||||
import {coerceBooleanProperty} from '@angular/cdk/coercion';
|
||||
import {Component, ElementRef, Input, OnDestroy} from '@angular/core';
|
||||
import {FormBuilder, FormGroup} from '@angular/forms';
|
||||
import {MatFormFieldControl} from '@angular/material';
|
||||
import {Component, ElementRef, Input, OnDestroy, Optional, Self} from '@angular/core';
|
||||
import {FormBuilder, FormGroup, ControlValueAccessor, NgControl} from '@angular/forms';
|
||||
import {MatFormFieldControl} from '@angular/material/form-field';
|
||||
import {Subject} from 'rxjs';
|
||||
|
||||
/** @title Form field with custom telephone number input control. */
|
||||
|
|
@ -30,17 +30,18 @@ export class MyTel {
|
|||
'[attr.aria-describedby]': 'describedBy',
|
||||
}
|
||||
})
|
||||
export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
|
||||
export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
|
||||
static nextId = 0;
|
||||
|
||||
parts: FormGroup;
|
||||
stateChanges = new Subject<void>();
|
||||
focused = false;
|
||||
ngControl = null;
|
||||
errorState = false;
|
||||
controlType = 'example-tel-input';
|
||||
id = `example-tel-input-${MyTelInput.nextId++}`;
|
||||
describedBy = '';
|
||||
onChange = (_: any) => {};
|
||||
onTouched = () => {};
|
||||
|
||||
get empty() {
|
||||
const {value: {area, exchange, subscriber}} = this.parts;
|
||||
|
|
@ -70,6 +71,7 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
|
|||
get disabled(): boolean { return this._disabled; }
|
||||
set disabled(value: boolean) {
|
||||
this._disabled = coerceBooleanProperty(value);
|
||||
this._disabled ? this.parts.disable() : this.parts.enable();
|
||||
this.stateChanges.next();
|
||||
}
|
||||
private _disabled = false;
|
||||
|
|
@ -88,22 +90,34 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
|
|||
this.stateChanges.next();
|
||||
}
|
||||
|
||||
constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef<HTMLElement>) {
|
||||
this.parts = fb.group({
|
||||
constructor(
|
||||
formBuilder: FormBuilder,
|
||||
private _focusMonitor: FocusMonitor,
|
||||
private _elementRef: ElementRef<HTMLElement>,
|
||||
@Optional() @Self() public ngControl: NgControl) {
|
||||
|
||||
this.parts = formBuilder.group({
|
||||
area: '',
|
||||
exchange: '',
|
||||
subscriber: '',
|
||||
});
|
||||
|
||||
fm.monitor(elRef, true).subscribe(origin => {
|
||||
_focusMonitor.monitor(_elementRef, true).subscribe(origin => {
|
||||
if (this.focused && !origin) {
|
||||
this.onTouched();
|
||||
}
|
||||
this.focused = !!origin;
|
||||
this.stateChanges.next();
|
||||
});
|
||||
|
||||
if (this.ngControl != null) {
|
||||
this.ngControl.valueAccessor = this;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.stateChanges.complete();
|
||||
this.fm.stopMonitoring(this.elRef);
|
||||
this._focusMonitor.stopMonitoring(this._elementRef);
|
||||
}
|
||||
|
||||
setDescribedByIds(ids: string[]) {
|
||||
|
|
@ -112,7 +126,27 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
|
|||
|
||||
onContainerClick(event: MouseEvent) {
|
||||
if ((event.target as Element).tagName.toLowerCase() != 'input') {
|
||||
this.elRef.nativeElement.querySelector('input')!.focus();
|
||||
this._elementRef.nativeElement.querySelector('input')!.focus();
|
||||
}
|
||||
}
|
||||
|
||||
writeValue(tel: MyTel | null): void {
|
||||
this.value = tel;
|
||||
}
|
||||
|
||||
registerOnChange(fn: any): void {
|
||||
this.onChange = fn;
|
||||
}
|
||||
|
||||
registerOnTouched(fn: any): void {
|
||||
this.onTouched = fn;
|
||||
}
|
||||
|
||||
setDisabledState(isDisabled: boolean): void {
|
||||
this.disabled = isDisabled;
|
||||
}
|
||||
|
||||
_handleInput(): void {
|
||||
this.onChange(this.parts.value);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,5 +16,5 @@
|
|||
}
|
||||
|
||||
.example-container .mat-radio-button {
|
||||
margin: 0 5px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<div class="example-container">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
|
||||
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
|
||||
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
|
||||
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<mat-icon>home</mat-icon>
|
||||
<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<mat-icon svgIcon="thumbs-up"></mat-icon>
|
||||
<mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {DomSanitizer} from '@angular/platform-browser';
|
||||
import {MatIconRegistry} from '@angular/material';
|
||||
import {MatIconRegistry} from '@angular/material/icon';
|
||||
|
||||
/**
|
||||
* @title SVG icons
|
||||
|
|
|
|||
|
|
@ -7,3 +7,7 @@
|
|||
.example-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<button mat-icon-button [matMenuTriggerFor]="menu">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
</button>
|
||||
<button mat-menu-item disabled>
|
||||
<mat-icon>voicemail</mat-icon>
|
||||
<span>Check voicemail</span>
|
||||
<span>Check voice mail</span>
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>notifications_off</mat-icon>
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
/** No CSS for this example */
|
||||
mat-form-field {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {PageEvent} from '@angular/material';
|
||||
import {PageEvent} from '@angular/material/paginator';
|
||||
|
||||
/**
|
||||
* @title Configurable paginator
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
.example-radio-group {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.example-radio-button {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.example-selected-value {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
|
||||
<label id="example-radio-group-label">Pick your favorite season</label>
|
||||
<mat-radio-group
|
||||
aria-labelledby="example-radio-group-label"
|
||||
class="example-radio-group"
|
||||
[(ngModel)]="favoriteSeason">
|
||||
<mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
|
||||
{{season}}
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<div class="example-selected-value">Your favorite season is: {{favoriteSeason}}</div>
|
||||
<div>Your favorite season is: {{favoriteSeason}}</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.mat-radio-button ~ .mat-radio-button {
|
||||
padding-right: 16px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<mat-radio-group>
|
||||
<mat-radio-group aria-label="Select an option">
|
||||
<mat-radio-button value="1">Option 1</mat-radio-button>
|
||||
<mat-radio-button value="2">Option 2</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
|
||||
<h4>mat-select</h4>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
|
||||
<mat-label>Choose an option</mat-label>
|
||||
<mat-select [disabled]="disableSelect.value">
|
||||
<mat-option value="option1">Option 1</mat-option>
|
||||
<mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
|
||||
<mat-option value="option3">Option 3</mat-option>
|
||||
|
|
@ -13,8 +14,9 @@
|
|||
|
||||
<h4>native html select</h4>
|
||||
<mat-form-field>
|
||||
<select matNativeControl placeholder="Choose an option" [disabled]="disableSelect.value">
|
||||
<option value="" disabled selected></option>
|
||||
<mat-label>Choose an option</mat-label>
|
||||
<select matNativeControl [disabled]="disableSelect.value">
|
||||
<option value="" selected></option>
|
||||
<option value="volvo">Volvo</option>
|
||||
<option value="saab" disabled>Saab</option>
|
||||
<option value="mercedes">Mercedes</option>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<h4>mat-select</h4>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Choose one" [formControl]="selected" [errorStateMatcher]="matcher">
|
||||
<mat-label>Choose one</mat-label>
|
||||
<mat-select [formControl]="selected" [errorStateMatcher]="matcher">
|
||||
<mat-option>Clear</mat-option>
|
||||
<mat-option value="valid">Valid option</mat-option>
|
||||
<mat-option value="invalid">Invalid option</mat-option>
|
||||
|
|
@ -14,7 +15,8 @@
|
|||
|
||||
<h4>native html select</h4>
|
||||
<mat-form-field class="demo-full-width">
|
||||
<select matNativeControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
|
||||
<mat-label>Choose one</mat-label>
|
||||
<select matNativeControl [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
|
||||
<option value=""></option>
|
||||
<option value="valid" selected>Valid option</option>
|
||||
<option value="invalid">Invalid option</option>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<form>
|
||||
<h4>mat-select</h4>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
|
||||
<mat-label>Favorite food</mat-label>
|
||||
<mat-select [(ngModel)]="selectedValue" name="food">
|
||||
<mat-option *ngFor="let food of foods" [value]="food.value">
|
||||
{{food.viewValue}}
|
||||
</mat-option>
|
||||
|
|
@ -10,8 +11,9 @@
|
|||
<p> Selected food: {{selectedValue}} </p>
|
||||
<h4>native html select</h4>
|
||||
<mat-form-field>
|
||||
<select matNativeControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
|
||||
<option value="" disabled selected></option>
|
||||
<mat-label>Favorite car</mat-label>
|
||||
<select matNativeControl [(ngModel)]="selectedCar" name="car">
|
||||
<option value="" selected></option>
|
||||
<option *ngFor="let car of cars" [value]="car.value">
|
||||
{{car.viewValue}}
|
||||
</option>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<h4>mat select</h4>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
|
||||
<mat-label>Favorite animal</mat-label>
|
||||
<mat-select [formControl]="animalControl" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let animal of animals" [value]="animal">
|
||||
{{animal.name}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<mat-form-field>
|
||||
<mat-select placeholder="Toppings" [formControl]="toppings" multiple>
|
||||
<mat-label>Toppings</mat-label>
|
||||
<mat-select [formControl]="toppings" multiple>
|
||||
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<mat-form-field>
|
||||
<mat-select placeholder="Select an option" disableRipple>
|
||||
<mat-label>Select an option</mat-label>
|
||||
<mat-select disableRipple>
|
||||
<mat-option value="1">Option 1</mat-option>
|
||||
<mat-option value="2">Option 2</mat-option>
|
||||
<mat-option value="3">Option 3</mat-option>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<h4>mat-select</h4>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Pokemon" [formControl]="pokemonControl">
|
||||
<mat-label>Pokemon</mat-label>
|
||||
<mat-select [formControl]="pokemonControl">
|
||||
<mat-option>-- None --</mat-option>
|
||||
<mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
|
||||
[disabled]="group.disabled">
|
||||
|
|
@ -13,6 +14,7 @@
|
|||
|
||||
<h4>native html select</h4>
|
||||
<mat-form-field>
|
||||
<mat-label>Cars</mat-label>
|
||||
<select matNativeControl>
|
||||
<optgroup label="Swedish Cars">
|
||||
<option value="volvo">volvo</option>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<h4>Basic mat-select</h4>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Favorite food">
|
||||
<mat-label>Favorite food</mat-label>
|
||||
<mat-select>
|
||||
<mat-option *ngFor="let food of foods" [value]="food.value">
|
||||
{{food.viewValue}}
|
||||
</mat-option>
|
||||
|
|
@ -9,6 +10,7 @@
|
|||
|
||||
<h4>Basic native select</h4>
|
||||
<mat-form-field>
|
||||
<mat-label>Cars</mat-label>
|
||||
<select matNativeControl required>
|
||||
<option value="volvo">Volvo</option>
|
||||
<option value="saab">Saab</option>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.example-panel-red .mat-select-panel {
|
||||
.example-panel-red.mat-select-panel {
|
||||
background: rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.example-panel-green .mat-select-panel {
|
||||
.example-panel-green.mat-select-panel {
|
||||
background: rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.example-panel-blue .mat-select-panel {
|
||||
.example-panel-blue.mat-select-panel {
|
||||
background: rgba(0, 0, 255, 0.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<mat-form-field>
|
||||
<mat-select placeholder="Panel color" [formControl]="panelColor"
|
||||
<mat-label>Panel color</mat-label>
|
||||
<mat-select [formControl]="panelColor"
|
||||
panelClass="example-panel-{{panelColor.value}}">
|
||||
<mat-option value="red">Red</mat-option>
|
||||
<mat-option value="green">Green</mat-option>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<h4>mat-select</h4>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="State">
|
||||
<mat-label>State</mat-label>
|
||||
<mat-select>
|
||||
<mat-option>None</mat-option>
|
||||
<mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
|
||||
</mat-select>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<mat-form-field>
|
||||
<mat-label>Select an option</mat-label>
|
||||
<mat-select [(value)]="selected">
|
||||
<mat-option>None</mat-option>
|
||||
<mat-option value="option1">Option 1</mat-option>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
.example-container {
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
margin: 10px;
|
||||
margin: 12px;
|
||||
border: 1px solid #555;
|
||||
}
|
||||
|
||||
mat-drawer-content {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import {MatSidenav} from '@angular/material/sidenav';
|
|||
styleUrls: ['sidenav-disable-close-example.css'],
|
||||
})
|
||||
export class SidenavDisableCloseExample {
|
||||
@ViewChild('sidenav') sidenav: MatSidenav;
|
||||
@ViewChild('sidenav', {static: false}) sidenav: MatSidenav;
|
||||
|
||||
reason = '';
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -1,3 +1,8 @@
|
|||
<mat-form-field>
|
||||
<mat-label>Snack bar duration (seconds)</mat-label>
|
||||
<input type="number" [(ngModel)]="durationInSeconds" matInput>
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
|
||||
Pizza party
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {MatSnackBar} from '@angular/material';
|
||||
import {MatSnackBar} from '@angular/material/snack-bar';
|
||||
|
||||
/**
|
||||
* @title Snack-bar with a custom component
|
||||
|
|
@ -7,13 +7,16 @@ import {MatSnackBar} from '@angular/material';
|
|||
@Component({
|
||||
selector: 'snack-bar-component-example',
|
||||
templateUrl: 'snack-bar-component-example.html',
|
||||
styleUrls: ['snack-bar-component-example.css'],
|
||||
})
|
||||
export class SnackBarComponentExample {
|
||||
constructor(public snackBar: MatSnackBar) {}
|
||||
durationInSeconds = 5;
|
||||
|
||||
constructor(private _snackBar: MatSnackBar) {}
|
||||
|
||||
openSnackBar() {
|
||||
this.snackBar.openFromComponent(PizzaPartyComponent, {
|
||||
duration: 500,
|
||||
this._snackBar.openFromComponent(PizzaPartyComponent, {
|
||||
duration: this.durationInSeconds * 1000,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
/** No CSS for this example */
|
||||
mat-form-field {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {MatSnackBar} from '@angular/material';
|
||||
import {MatSnackBar} from '@angular/material/snack-bar';
|
||||
|
||||
/**
|
||||
* @title Basic snack-bar
|
||||
|
|
@ -10,10 +10,10 @@ import {MatSnackBar} from '@angular/material';
|
|||
styleUrls: ['snack-bar-overview-example.css'],
|
||||
})
|
||||
export class SnackBarOverviewExample {
|
||||
constructor(public snackBar: MatSnackBar) {}
|
||||
constructor(private _snackBar: MatSnackBar) {}
|
||||
|
||||
openSnackBar(message: string, action: string) {
|
||||
this.snackBar.open(message, action, {
|
||||
this._snackBar.open(message, action, {
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
mat-form-field {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import {
|
|||
MatSnackBar,
|
||||
MatSnackBarHorizontalPosition,
|
||||
MatSnackBarVerticalPosition,
|
||||
} from '@angular/material';
|
||||
} from '@angular/material/snack-bar';
|
||||
|
||||
/**
|
||||
* @title Snack-bar with configurable position
|
||||
|
|
@ -11,16 +11,17 @@ import {
|
|||
@Component({
|
||||
selector: 'snack-bar-position-example',
|
||||
templateUrl: 'snack-bar-position-example.html',
|
||||
styleUrls: ['snack-bar-position-example.css'],
|
||||
})
|
||||
export class SnackBarPositionExample {
|
||||
|
||||
horizontalPosition: MatSnackBarHorizontalPosition = 'start';
|
||||
verticalPosition: MatSnackBarVerticalPosition = 'bottom';
|
||||
|
||||
constructor(public snackBar: MatSnackBar) {}
|
||||
constructor(private _snackBar: MatSnackBar) {}
|
||||
|
||||
openSnackBar() {
|
||||
this.snackBar.open('Canonball!!', 'End now', {
|
||||
this._snackBar.open('Canonball!!', 'End now', {
|
||||
duration: 500,
|
||||
horizontalPosition: this.horizontalPosition,
|
||||
verticalPosition: this.verticalPosition,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {Sort} from '@angular/material';
|
||||
import {Sort} from '@angular/material/sort';
|
||||
|
||||
export interface Dessert {
|
||||
calories: number;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
||||
import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
|
||||
import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
|
||||
|
||||
/**
|
||||
* @title Stepper that displays errors in the steps
|
||||
|
|
@ -10,7 +10,7 @@ import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
|
|||
templateUrl: 'stepper-errors-example.html',
|
||||
styleUrls: ['stepper-errors-example.css'],
|
||||
providers: [{
|
||||
provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
|
||||
provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
|
||||
}]
|
||||
})
|
||||
export class StepperErrorsExample implements OnInit {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
||||
import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
|
||||
import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
|
||||
|
||||
/**
|
||||
* @title Stepper with customized states
|
||||
|
|
@ -10,7 +10,7 @@ import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
|
|||
templateUrl: 'stepper-states-example.html',
|
||||
styleUrls: ['stepper-states-example.css'],
|
||||
providers: [{
|
||||
provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false}
|
||||
provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false}
|
||||
}]
|
||||
})
|
||||
export class StepperStatesExample implements OnInit {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export class TabGroupAsyncExample {
|
|||
asyncTabs: Observable<ExampleTab[]>;
|
||||
|
||||
constructor() {
|
||||
this.asyncTabs = Observable.create((observer: Observer<ExampleTab[]>) => {
|
||||
this.asyncTabs = new Observable((observer: Observer<ExampleTab[]>) => {
|
||||
setTimeout(() => {
|
||||
observer.next([
|
||||
{label: 'First', content: 'Content 1'},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Tag group with dynamic height based on tab contents
|
||||
* @title Tab group with dynamic height based on tab contents
|
||||
*/
|
||||
@Component({
|
||||
selector: 'tab-group-dynamic-height-example',
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
|
||||
class="example-element-row"
|
||||
[class.example-expanded-row]="expandedElement === element"
|
||||
(click)="expandedElement = element">
|
||||
(click)="expandedElement = expandedElement === element ? null : element">
|
||||
</tr>
|
||||
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
|
|||
templateUrl: 'table-expandable-rows-example.html',
|
||||
animations: [
|
||||
trigger('detailExpand', [
|
||||
state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
|
||||
state('collapsed', style({height: '0px', minHeight: '0'})),
|
||||
state('expanded', style({height: '*'})),
|
||||
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
||||
]),
|
||||
|
|
@ -19,7 +19,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
|
|||
export class TableExpandableRowsExample {
|
||||
dataSource = ELEMENT_DATA;
|
||||
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
|
||||
expandedElement: PeriodicElement;
|
||||
expandedElement: PeriodicElement | null;
|
||||
}
|
||||
|
||||
export interface PeriodicElement {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {MatTableDataSource} from '@angular/material';
|
||||
import {MatTableDataSource} from '@angular/material/table';
|
||||
|
||||
export interface PeriodicElement {
|
||||
name: string;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/* Structure */
|
||||
.example-container {
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.example-table-container {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="example-table-container">
|
||||
|
||||
<table mat-table [dataSource]="data" class="example-table"
|
||||
matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
|
||||
matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
|
||||
<!-- Number Column -->
|
||||
<ng-container matColumnDef="number">
|
||||
<th mat-header-cell *matHeaderCellDef>#</th>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import {HttpClient} from '@angular/common/http';
|
||||
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||
import {MatPaginator, MatSort} from '@angular/material';
|
||||
import {Component, ViewChild, AfterViewInit} from '@angular/core';
|
||||
import {MatPaginator} from '@angular/material/paginator';
|
||||
import {MatSort} from '@angular/material/sort';
|
||||
import {merge, Observable, of as observableOf} from 'rxjs';
|
||||
import {catchError, map, startWith, switchMap} from 'rxjs/operators';
|
||||
|
||||
|
|
@ -12,22 +13,22 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators';
|
|||
styleUrls: ['table-http-example.css'],
|
||||
templateUrl: 'table-http-example.html',
|
||||
})
|
||||
export class TableHttpExample implements OnInit {
|
||||
export class TableHttpExample implements AfterViewInit {
|
||||
displayedColumns: string[] = ['created', 'state', 'number', 'title'];
|
||||
exampleDatabase: ExampleHttpDao | null;
|
||||
exampleDatabase: ExampleHttpDatabase | null;
|
||||
data: GithubIssue[] = [];
|
||||
|
||||
resultsLength = 0;
|
||||
isLoadingResults = true;
|
||||
isRateLimitReached = false;
|
||||
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
|
||||
@ViewChild(MatSort, {static: false}) sort: MatSort;
|
||||
|
||||
constructor(private http: HttpClient) {}
|
||||
constructor(private _httpClient: HttpClient) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.exampleDatabase = new ExampleHttpDao(this.http);
|
||||
ngAfterViewInit() {
|
||||
this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
|
||||
|
||||
// If the user changes the sort order, reset back to the first page.
|
||||
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
|
||||
|
|
@ -71,14 +72,14 @@ export interface GithubIssue {
|
|||
}
|
||||
|
||||
/** An example database that the data source uses to retrieve data for the table. */
|
||||
export class ExampleHttpDao {
|
||||
constructor(private http: HttpClient) {}
|
||||
export class ExampleHttpDatabase {
|
||||
constructor(private _httpClient: HttpClient) {}
|
||||
|
||||
getRepoIssues(sort: string, order: string, page: number): Observable<GithubApi> {
|
||||
const href = 'https://api.github.com/search/issues';
|
||||
const requestUrl =
|
||||
`${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`;
|
||||
`${href}?q=repo:angular/components&sort=${sort}&order=${order}&page=${page + 1}`;
|
||||
|
||||
return this.http.get<GithubApi>(requestUrl);
|
||||
return this._httpClient.get<GithubApi>(requestUrl);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
|
||||
import {MatPaginator} from '@angular/material/paginator';
|
||||
import {MatSort} from '@angular/material/sort';
|
||||
import {MatTableDataSource} from '@angular/material/table';
|
||||
|
||||
export interface UserData {
|
||||
id: string;
|
||||
|
|
@ -9,11 +11,14 @@ export interface UserData {
|
|||
}
|
||||
|
||||
/** Constants used to fill up our data base. */
|
||||
const COLORS: string[] = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
|
||||
'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
|
||||
const NAMES: string[] = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
|
||||
'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
|
||||
'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
|
||||
const COLORS: string[] = [
|
||||
'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', 'fuchsia', 'lime', 'teal',
|
||||
'aqua', 'blue', 'navy', 'black', 'gray'
|
||||
];
|
||||
const NAMES: string[] = [
|
||||
'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 'Charlotte', 'Theodore', 'Isla', 'Oliver',
|
||||
'Isabella', 'Jasper', 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'
|
||||
];
|
||||
|
||||
/**
|
||||
* @title Data table with sorting, pagination, and filtering.
|
||||
|
|
@ -27,8 +32,8 @@ export class TableOverviewExample implements OnInit {
|
|||
displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
|
||||
dataSource: MatTableDataSource<UserData>;
|
||||
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
|
||||
@ViewChild(MatSort, {static: true}) sort: MatSort;
|
||||
|
||||
constructor() {
|
||||
// Create 100 users
|
||||
|
|
@ -54,8 +59,7 @@ export class TableOverviewExample implements OnInit {
|
|||
|
||||
/** Builds and returns a new User. */
|
||||
function createNewUser(id: number): UserData {
|
||||
const name =
|
||||
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
|
||||
const name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
|
||||
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||
import {MatPaginator, MatTableDataSource} from '@angular/material';
|
||||
import {MatPaginator} from '@angular/material/paginator';
|
||||
import {MatTableDataSource} from '@angular/material/table';
|
||||
|
||||
/**
|
||||
* @title Table with pagination
|
||||
|
|
@ -13,7 +14,7 @@ export class TablePaginationExample implements OnInit {
|
|||
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
|
||||
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
|
||||
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
|
||||
|
||||
ngOnInit() {
|
||||
this.dataSource.paginator = this.paginator;
|
||||
|
|
|
|||
|
|
@ -5,13 +5,15 @@
|
|||
<th mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox (change)="$event ? masterToggle() : null"
|
||||
[checked]="selection.hasValue() && isAllSelected()"
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected()">
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected()"
|
||||
[aria-label]="checkboxLabel()">
|
||||
</mat-checkbox>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<mat-checkbox (click)="$event.stopPropagation()"
|
||||
(change)="$event ? selection.toggle(row) : null"
|
||||
[checked]="selection.isSelected(row)">
|
||||
[checked]="selection.isSelected(row)"
|
||||
[aria-label]="checkboxLabel(row)">
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {SelectionModel} from '@angular/cdk/collections';
|
||||
import {Component} from '@angular/core';
|
||||
import {MatTableDataSource} from '@angular/material';
|
||||
import {MatTableDataSource} from '@angular/material/table';
|
||||
|
||||
export interface PeriodicElement {
|
||||
name: string;
|
||||
|
|
@ -48,4 +48,12 @@ export class TableSelectionExample {
|
|||
this.selection.clear() :
|
||||
this.dataSource.data.forEach(row => this.selection.select(row));
|
||||
}
|
||||
|
||||
/** The label for the checkbox on the passed row */
|
||||
checkboxLabel(row?: PeriodicElement): string {
|
||||
if (!row) {
|
||||
return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
|
||||
}
|
||||
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
import {Component, Input, OnDestroy, OnInit, Optional, ViewChild} from '@angular/core';
|
||||
import {coerceBooleanProperty} from '@angular/cdk/coercion';
|
||||
import {
|
||||
MatColumnDef,
|
||||
MatSort,
|
||||
MatSortHeader,
|
||||
MatTable,
|
||||
MatTableDataSource
|
||||
} from '@angular/material';
|
||||
import { MatSort, MatSortHeader } from '@angular/material/sort';
|
||||
import { MatColumnDef, MatTable, MatTableDataSource } from '@angular/material/table';
|
||||
|
||||
export interface PeriodicElement {
|
||||
name: string;
|
||||
|
|
@ -39,9 +34,9 @@ const ELEMENT_DATA: PeriodicElement[] = [
|
|||
export class TableSimpleColumnExample implements OnInit {
|
||||
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
|
||||
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
|
||||
getWeight = (data: PeriodicElement) => '~' + data.weight;
|
||||
|
||||
@ViewChild('sort') sort: MatSort;
|
||||
@ViewChild('sort', {static: true}) sort: MatSort;
|
||||
getWeight = (data: PeriodicElement) => '~' + data.weight;
|
||||
|
||||
ngOnInit() {
|
||||
this.dataSource.sort = this.sort;
|
||||
|
|
@ -106,9 +101,9 @@ export class SimpleColumn<T> implements OnDestroy, OnInit {
|
|||
}
|
||||
_sortable: boolean;
|
||||
|
||||
@ViewChild(MatColumnDef) columnDef: MatColumnDef;
|
||||
@ViewChild(MatColumnDef, {static: true}) columnDef: MatColumnDef;
|
||||
|
||||
@ViewChild(MatSortHeader) sortHeader: MatSortHeader;
|
||||
@ViewChild(MatSortHeader, {static: true}) sortHeader: MatSortHeader;
|
||||
|
||||
constructor(@Optional() public table: MatTable<any>) { }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||
import {MatSort, MatTableDataSource} from '@angular/material';
|
||||
import {MatSort} from '@angular/material/sort';
|
||||
import {MatTableDataSource} from '@angular/material/table';
|
||||
|
||||
export interface PeriodicElement {
|
||||
name: string;
|
||||
|
|
@ -33,7 +34,7 @@ export class TableSortingExample implements OnInit {
|
|||
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
|
||||
dataSource = new MatTableDataSource(ELEMENT_DATA);
|
||||
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
@ViewChild(MatSort, {static: true}) sort: MatSort;
|
||||
|
||||
ngOnInit() {
|
||||
this.dataSource.sort = this.sort;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Table with a sticky columns
|
||||
* @title Table with sticky columns
|
||||
*/
|
||||
@Component({
|
||||
selector: 'table-sticky-columns-example',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {MatButtonToggleGroup} from '@angular/material';
|
||||
import {MatButtonToggleGroup} from '@angular/material/button-toggle';
|
||||
|
||||
/**
|
||||
* @title Flex-layout tables with toggle-able sticky headers, footers, and columns
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {MatButtonToggleGroup} from '@angular/material';
|
||||
import {MatButtonToggleGroup} from '@angular/material/button-toggle';
|
||||
|
||||
/**
|
||||
* @title Tables with toggle-able sticky headers, footers, and columns
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import {DataSource} from '@angular/cdk/collections';
|
||||
import {
|
||||
AfterContentInit,
|
||||
Component,
|
||||
|
|
@ -7,15 +8,14 @@ import {
|
|||
QueryList,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import {MatSort} from '@angular/material/sort';
|
||||
import {
|
||||
MatColumnDef,
|
||||
MatHeaderRowDef,
|
||||
MatRowDef,
|
||||
MatSort,
|
||||
MatTable,
|
||||
MatTableDataSource
|
||||
} from '@angular/material';
|
||||
import {DataSource} from '@angular/cdk/collections';
|
||||
} from '@angular/material/table';
|
||||
|
||||
export interface PeriodicElement {
|
||||
name: string;
|
||||
|
|
@ -49,7 +49,7 @@ export class TableWrappedExample implements OnInit {
|
|||
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
|
||||
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
|
||||
|
||||
@ViewChild('sort') sort: MatSort;
|
||||
@ViewChild('sort', {static: true}) sort: MatSort;
|
||||
|
||||
ngOnInit() {
|
||||
this.dataSource.sort = this.sort;
|
||||
|
|
@ -70,11 +70,11 @@ export class TableWrappedExample implements OnInit {
|
|||
`]
|
||||
})
|
||||
export class WrapperTable<T> implements AfterContentInit {
|
||||
@ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList<MatHeaderRowDef>;
|
||||
@ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList<MatHeaderRowDef>;
|
||||
@ContentChildren(MatRowDef) rowDefs: QueryList<MatRowDef<T>>;
|
||||
@ContentChildren(MatColumnDef) columnDefs: QueryList<MatColumnDef>;
|
||||
|
||||
@ViewChild(MatTable) table: MatTable<T>;
|
||||
@ViewChild(MatTable, {static: true}) table: MatTable<T>;
|
||||
|
||||
@Input() columns: string[];
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
/** No CSS for this example */
|
||||
mat-form-field {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
/** No CSS for this example */
|
||||
mat-form-field {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {AutofillMonitor} from '@angular/cdk/text-field';
|
||||
import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
|
||||
import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
|
||||
|
||||
/** @title Monitoring autofill state with AutofillMonitor */
|
||||
@Component({
|
||||
|
|
@ -7,23 +7,23 @@ import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core
|
|||
templateUrl: './text-field-autofill-monitor-example.html',
|
||||
styleUrls: ['./text-field-autofill-monitor-example.css'],
|
||||
})
|
||||
export class TextFieldAutofillMonitorExample implements OnDestroy, OnInit {
|
||||
@ViewChild('first', {read: ElementRef}) firstName: ElementRef<HTMLElement>;
|
||||
@ViewChild('last', {read: ElementRef}) lastName: ElementRef<HTMLElement>;
|
||||
export class TextFieldAutofillMonitorExample implements AfterViewInit, OnDestroy {
|
||||
@ViewChild('first', { read: ElementRef, static: false }) firstName: ElementRef<HTMLElement>;
|
||||
@ViewChild('last', { read: ElementRef, static: false }) lastName: ElementRef<HTMLElement>;
|
||||
firstNameAutofilled: boolean;
|
||||
lastNameAutofilled: boolean;
|
||||
|
||||
constructor(private autofill: AutofillMonitor) {}
|
||||
constructor(private _autofill: AutofillMonitor) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.autofill.monitor(this.firstName)
|
||||
ngAfterViewInit() {
|
||||
this._autofill.monitor(this.firstName)
|
||||
.subscribe(e => this.firstNameAutofilled = e.isAutofilled);
|
||||
this.autofill.monitor(this.lastName)
|
||||
this._autofill.monitor(this.lastName)
|
||||
.subscribe(e => this.lastNameAutofilled = e.isAutofilled);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.autofill.stopMonitoring(this.firstName);
|
||||
this.autofill.stopMonitoring(this.lastName);
|
||||
this._autofill.stopMonitoring(this.firstName);
|
||||
this._autofill.stopMonitoring(this.lastName);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
/** No CSS for this example */
|
||||
mat-form-field {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,6 @@
|
|||
<textarea matInput
|
||||
cdkTextareaAutosize
|
||||
#autosize="cdkTextareaAutosize"
|
||||
cdkAutosizeMinRows="2"
|
||||
cdkAutosizeMinRows="1"
|
||||
cdkAutosizeMaxRows="5"></textarea>
|
||||
</mat-form-field>
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@ import {take} from 'rxjs/operators';
|
|||
styleUrls: ['./text-field-autosize-textarea-example.css'],
|
||||
})
|
||||
export class TextFieldAutosizeTextareaExample {
|
||||
constructor(private ngZone: NgZone) {}
|
||||
constructor(private _ngZone: NgZone) {}
|
||||
|
||||
@ViewChild('autosize') autosize: CdkTextareaAutosize;
|
||||
@ViewChild('autosize', {static: false}) autosize: CdkTextareaAutosize;
|
||||
|
||||
triggerResize() {
|
||||
// Wait for changes to be applied, then trigger textarea resize.
|
||||
this.ngZone.onStable.pipe(take(1))
|
||||
this._ngZone.onStable.pipe(take(1))
|
||||
.subscribe(() => this.autosize.resizeToFitContent(true));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
<mat-toolbar-row>
|
||||
<span>Second Line</span>
|
||||
<span class="example-spacer"></span>
|
||||
<mat-icon class="example-icon">verified_user</mat-icon>
|
||||
<mat-icon class="example-icon" aria-hidden="false" aria-label="Example user verified icon">verified_user</mat-icon>
|
||||
</mat-toolbar-row>
|
||||
|
||||
<mat-toolbar-row>
|
||||
<span>Third Line</span>
|
||||
<span class="example-spacer"></span>
|
||||
<mat-icon class="example-icon">favorite</mat-icon>
|
||||
<mat-icon class="example-icon">delete</mat-icon>
|
||||
<mat-icon class="example-icon" aria-hidden="false" aria-label="Example heart icon">favorite</mat-icon>
|
||||
<mat-icon class="example-icon" aria-hidden="false" aria-label="Example delete icon">delete</mat-icon>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {FormControl} from '@angular/forms';
|
||||
import {TooltipPosition} from '@angular/material';
|
||||
import {TooltipPosition} from '@angular/material/tooltip';
|
||||
|
||||
/**
|
||||
* @title Tooltip that demonstrates auto-hiding when it clips out of its scrolling container.
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<div>
|
||||
<span> Mouse over to </span>
|
||||
<span> Click the following buttons to... </span>
|
||||
<button mat-button
|
||||
(mouseenter)="tooltip.show()"
|
||||
aria-label="Button that progamatically shows a tooltip on another button"
|
||||
(click)="tooltip.show()"
|
||||
aria-label="Show tooltip on the button at the end of this section"
|
||||
class="example-action-button">
|
||||
show
|
||||
</button>
|
||||
<button mat-button
|
||||
(mouseenter)="tooltip.hide()"
|
||||
aria-label="Button that progamatically hides a tooltip on another button"
|
||||
(click)="tooltip.hide()"
|
||||
aria-label="Hide tooltip on the button at the end of this section"
|
||||
class="example-action-button">
|
||||
hide
|
||||
</button>
|
||||
<button mat-button
|
||||
(mouseenter)="tooltip.toggle()"
|
||||
aria-label="Button that progamatically toggles a tooltip on another button to show/hide"
|
||||
(click)="tooltip.toggle()"
|
||||
aria-label="Show/Hide tooltip on the button at the end of this section"
|
||||
class="example-action-button">
|
||||
toggle show/hide
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material';
|
||||
import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material/tooltip';
|
||||
|
||||
/** Custom options the configure the tooltip's default show/hide delays. */
|
||||
export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {FormControl} from '@angular/forms';
|
||||
import {TooltipPosition} from '@angular/material';
|
||||
import {TooltipPosition} from '@angular/material/tooltip';
|
||||
|
||||
/**
|
||||
* @title Tooltip with a custom position
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user