This is a draft cheat sheet. It is a work in progress and is not finished yet.
CDK
Common Behaviors |
Accessibility
Bidirectionality
Drag and Drop
Layout
Observers
Overlay
Platform
Portal
Scrolling
Text field |
Components |
Stepper
Table
Tree |
Components
Form Controls |
Autocomplete
Checkbox
Datepicker
Form field
Input
Radio button
Select
Slider
Slide toggle |
Navigation |
Menu
Sidenav
Toolbar |
Layout |
Card
Divider
Expansion Panel
Grid list
List
Stepper
Tabs
Tree |
Buttons & Indicators |
Button
Button toggle
Badge
Chips
Icon
Progress spinner
Progress bar
Ripples |
Popups & Modals |
Bottom Sheet
Dialog
Snackbar
Tooltip |
Data table |
Paginator
Sort header
Table |
Schematics
|
address-form Component with a form group that uses Material Design form controls to prompt for a shipping address
|
|
navigation Creates a component with a responsive Material Design sidenav and a toolbar for showing the app name
|
|
dashboard Component with multiple Material Design cards and menus which are aligned in a grid layout
|
|
table Generates a component with a Material Design data table that supports sorting and pagination
|
|
tree Component that interactively visualizes a nested folder structure by using the <mat-tree> component
|
|
drag-drop* Component that uses the @angular/cdk/drag-drop
directives for creating an interactive to-do list |
ng g @angular/material:<schematics> <name>
* ng g @angular/cdk:drag-drop <name>
|
|
Autocomplete
|
Simple <mat-form-field>
<input type="text"
matInput
[formControl]="myControl"
[matAutocomplete]="auto">
</mat-form-field>
<mat-autocomplete
#auto="matAutocomplete">
<mat-option
*ngFor="let option of options"
[value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
export class AutocompleteSimpleExample {
myControl = new FormControl();
options: string[] = ['One', 'Two', 'Three'];
}
|
|
Filter <mat-option
*ngFor="let option of options | async"
[value]="option">
options: Observable<string[]>;
ngOnInit() {
this.options =
this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: string: string[] {
...
return filteredArray;
}
|
|
Group <mat-autocomplete
#auto="matAutocomplete">
<mat-optgroup
ngFor="let group of groups | async"
[label]="group.name">
<mat-option
ngFor="let option of group.options"
[value]="option">
{{option.name}}
</mat-option>
</mat-optgroup>
</mat-autocomplete>
|
|
