Skip to content

Commit 3ad670c

Browse files
kseamonkseamon
committed
more demos!
1 parent cf51d12 commit 3ad670c

File tree

7 files changed

+376
-8
lines changed

7 files changed

+376
-8
lines changed

‎src/material-examples/popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.example-table {
2+
width: 100%;
3+
}
4+
5+
.example-table th {
6+
text-align: left;
7+
}
8+
9+
.example-table td,
10+
.example-table th {
11+
min-width: 300px;
12+
width: 25%;
13+
}
14+
15+
.example-input-container {
16+
display: flex;
17+
justify-content: stretch;
18+
}
19+
20+
.example-input-container mat-form-field {
21+
flex: 1;
22+
}

‎src/material-examples/popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example.html

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<table class="example-table" mat-table editable [dataSource]="dataSource">
2+
<ng-template #nameEdit let-ctx>
3+
<div>
4+
<form #f="ngForm"
5+
matEditLens
6+
(ngSubmit)="onSubmit(ctx.person, f)"
7+
[matEditLensPreservedFormValue]="preservedValues.get(ctx.person)"
8+
(matEditLensPreservedFormValueChange)="preservedValues.set(ctx.person, $event)">
9+
<div mat-edit-content class="example-input-container">
10+
<mat-form-field>
11+
<input matInput [ngModel]="ctx.person.firstName" name="firstName" required
12+
[attr.cdkFocusInitial]="ctx.focus === 'firstName' || null">
13+
</mat-form-field>
14+
<mat-form-field>
15+
<input matInput [ngModel]="ctx.person.middleName" name="middleName"
16+
[attr.cdkFocusInitial]="ctx.focus === 'middleName' || null">
17+
</mat-form-field>
18+
<mat-form-field>
19+
<input matInput [ngModel]="ctx.person.lastName" name="lastName" required
20+
[attr.cdkFocusInitial]="ctx.focus === 'lastName' || null">
21+
</mat-form-field>
22+
</div>
23+
24+
<div mat-edit-actions>
25+
<button mat-button type="submit">Confirm</button>
26+
<button mat-button cdkEditRevert>Revert</button>
27+
<button mat-button cdkEditClose>Close</button>
28+
</div>
29+
</form>
30+
</div>
31+
</ng-template>
32+
33+
<!-- Position Column -->
34+
<ng-container matColumnDef="id">
35+
<th mat-header-cell *matHeaderCellDef> No. </th>
36+
<td mat-cell *matCellDef="let person"> {{person.id}} </td>
37+
</ng-container>
38+
39+
<!-- Name Column -->
40+
<ng-container matColumnDef="firstName">
41+
<th mat-header-cell *matHeaderCellDef> First Name </th>
42+
<td mat-cell *matCellDef="let person"
43+
[matPopoverEdit]="nameEdit"
44+
[matPopoverEditContext]="{person: person, focus: 'firstName'}"
45+
[matPopoverEditColspan]="{after: 2}">
46+
{{person.firstName}}
47+
48+
<span *matRowHoverContent>
49+
<button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
50+
</span>
51+
</td>
52+
</ng-container>
53+
54+
<!-- Weight Column -->
55+
<ng-container matColumnDef="middleName">
56+
<th mat-header-cell *matHeaderCellDef> Middle Name </th>
57+
<td mat-cell *matCellDef="let person"
58+
[matPopoverEdit]="nameEdit"
59+
[matPopoverEditContext]="{person: person, focus: 'middleName'}"
60+
[matPopoverEditColspan]="{before:1 , after: 1}">
61+
{{person.middleName}}
62+
63+
<span *matRowHoverContent>
64+
<button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
65+
</span>
66+
</td>
67+
</ng-container>
68+
69+
<!-- Symbol Column -->
70+
<ng-container matColumnDef="lastName">
71+
<th mat-header-cell *matHeaderCellDef> Last Name </th>
72+
<td mat-cell *matCellDef="let person"
73+
[matPopoverEdit]="nameEdit"
74+
[matPopoverEditContext]="{person: person, focus: 'lastName'}"
75+
[matPopoverEditColspan]="{before: 2}">
76+
{{person.lastName}}
77+
78+
<span *matRowHoverContent>
79+
<button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
80+
</span>
81+
</td>
82+
</ng-container>
83+
84+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
85+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
86+
</table>

‎src/material-examples/popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example.ts

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import {Component} from '@angular/core';
2+
import {DataSource} from '@angular/cdk/collections';
3+
import {DomSanitizer} from '@angular/platform-browser';
4+
import {NgForm} from '@angular/forms';
5+
import {MatIconRegistry} from '@angular/material';
6+
import {BehaviorSubject, Observable} from 'rxjs';
7+
8+
export interface Person {
9+
id: number;
10+
firstName: string;
11+
middleName: string;
12+
lastName: string;
13+
}
14+
15+
const PERSON_DATA: Person[] = [
16+
{id: 1, firstName: 'Terra', middleName: 'Maduin', lastName: 'Branford'},
17+
{id: 2, firstName: 'Locke', middleName: '', lastName: 'Cole'},
18+
{id: 3, firstName: 'Celes', middleName: 'Gestahl', lastName: 'Chere'},
19+
{id: 4, firstName: 'Edgar', middleName: 'Roni', lastName: 'Figaro'},
20+
{id: 5, firstName: 'Sabin', middleName: 'Rene', lastName: 'Figaro'},
21+
{id: 6, firstName: 'Clyde', middleName: '"Shadow"', lastName: 'Arrowny'},
22+
{id: 7, firstName: 'Setzer', middleName: '', lastName: 'Gabbiani'},
23+
{id: 8, firstName: 'Cid', middleName: 'Del Norte', lastName: 'Marquez'},
24+
{id: 9, firstName: 'Mog', middleName: '', lastName: 'McMoogle'},
25+
];
26+
27+
/**
28+
* @title Material Popover Edit spanning multiple columns on a Material data-table
29+
*/
30+
@Component({
31+
selector: 'popover-edit-cell-span-mat-table-example',
32+
styleUrls: ['popover-edit-cell-span-mat-table-example.css'],
33+
templateUrl: 'popover-edit-cell-span-mat-table-example.html',
34+
})
35+
export class PopoverEditCellSpanMatTableExample {
36+
displayedColumns: string[] = ['id', 'firstName', 'middleName', 'lastName'];
37+
dataSource = new ExampleDataSource();
38+
39+
readonly preservedValues = new WeakMap<Person, any>();
40+
41+
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
42+
iconRegistry.addSvgIcon(
43+
'edit',
44+
sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/edit-icon.svg'));
45+
}
46+
47+
onSubmit(person: Person, f: NgForm) {
48+
if (!f.valid) {
49+
return;
50+
}
51+
52+
person.firstName = f.value['firstName'];
53+
person.middleName = f.value['middleName'];
54+
person.lastName = f.value['lastName'];
55+
}
56+
}
57+
58+
/**
59+
* Data source to provide what data should be rendered in the table. Note that the data source
60+
* can retrieve its data in any way. In this case, the data source is provided a reference
61+
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
62+
* the underlying data. Instead, it only needs to take the data and send the table exactly what
63+
* should be rendered.
64+
*/
65+
export class ExampleDataSource extends DataSource<Person> {
66+
/** Stream of data that is provided to the table. */
67+
data = new BehaviorSubject<Person[]>(PERSON_DATA);
68+
69+
/** Connect function called by the table to retrieve one stream containing the data to render. */
70+
connect(): Observable<Person[]> {
71+
return this.data;
72+
}
73+
74+
disconnect() {}
75+
}

‎src/material-examples/popover-edit-tab-out-mat-table/popover-edit-tab-out-mat-table-example.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.example-table {
2+
width: 100%;
3+
}
4+
5+
.example-table th {
6+
text-align: left;
7+
}
8+
9+
.example-table td,
10+
.example-table th {
11+
width: 25%;
12+
}

‎src/material-examples/popover-edit-tab-out-mat-table/popover-edit-tab-out-mat-table-example.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<table class="example-table" mat-table editable [dataSource]="dataSource">
2+
<!--
3+
This edit lens is specified outside of the cell and must explicitly declare
4+
its context. It could be reused in multiple cells.
5+
-->
6+
<ng-template #weightEdit let-element>
7+
<div>
8+
<form #f="ngForm"
9+
matEditLens
10+
matEditLensClickOutBehavior="submit"
11+
(ngSubmit)="onSubmitWeight(element, f)"
12+
[matEditLensPreservedFormValue]="preservedWeightValues.get(element)"
13+
(matEditLensPreservedFormValueChange)="preservedWeightValues.set(element, $event)">
14+
<div mat-edit-content>
15+
<mat-form-field>
16+
<input matInput type="number" [ngModel]="element.weight" name="weight" required>
17+
</mat-form-field>
18+
</div>
19+
</form>
20+
</div>
21+
</ng-template>
22+
23+
<!-- Position Column -->
24+
<ng-container matColumnDef="position">
25+
<th mat-header-cell *matHeaderCellDef> No. </th>
26+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
27+
</ng-container>
28+
29+
<!-- Name Column -->
30+
<ng-container matColumnDef="name">
31+
<th mat-header-cell *matHeaderCellDef> Name </th>
32+
<td mat-cell *matCellDef="let element"
33+
[matPopoverEdit]="nameEdit" matPopoverEditTabOut
34+
matEditOpen>
35+
{{element.name}}
36+
37+
<!-- This edit is defined in the cell and can implicitly access element -->
38+
<ng-template #nameEdit>
39+
<div>
40+
<form #f="ngForm"
41+
matEditLens
42+
matEditLensClickOutBehavior="submit"
43+
(ngSubmit)="onSubmitName(element, f)"
44+
[matEditLensPreservedFormValue]="preservedNameValues.get(element)"
45+
(matEditLensPreservedFormValueChange)="preservedNameValues.set(element, $event)">
46+
<div mat-edit-content>
47+
<mat-form-field>
48+
<input matInput [ngModel]="element.name" name="name" required>
49+
</mat-form-field>
50+
</div>
51+
</form>
52+
</div>
53+
</ng-template>
54+
55+
<span *matRowHoverContent>
56+
<mat-icon>edit</mat-icon>
57+
</span>
58+
</td>
59+
</ng-container>
60+
61+
<!-- Weight Column -->
62+
<ng-container matColumnDef="weight">
63+
<th mat-header-cell *matHeaderCellDef> Weight </th>
64+
<td mat-cell *matCellDef="let element"
65+
[matPopoverEdit]="weightEdit" matPopoverEditTabOut
66+
[matPopoverEditContext]="element"
67+
matEditOpen>
68+
{{element.weight}}
69+
70+
<span *matRowHoverContent>
71+
<mat-icon>edit</mat-icon>
72+
</span>
73+
</td>
74+
</ng-container>
75+
76+
<!-- Symbol Column -->
77+
<ng-container matColumnDef="symbol">
78+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
79+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
80+
</ng-container>
81+
82+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
83+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
84+
</table>

‎src/material-examples/popover-edit-tab-out-mat-table/popover-edit-tab-out-mat-table-example.ts

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import {Component} from '@angular/core';
2+
import {DataSource} from '@angular/cdk/collections';
3+
import {DomSanitizer} from '@angular/platform-browser';
4+
import {NgForm} from '@angular/forms';
5+
import {MatIconRegistry} from '@angular/material';
6+
import {BehaviorSubject, Observable} from 'rxjs';
7+
8+
export interface PeriodicElement {
9+
name: string;
10+
position: number;
11+
weight: number;
12+
symbol: string;
13+
}
14+
15+
const ELEMENT_DATA: PeriodicElement[] = [
16+
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
17+
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
18+
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
19+
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
20+
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
21+
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
22+
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
23+
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
24+
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
25+
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
26+
{position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
27+
{position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
28+
{position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
29+
{position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
30+
{position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
31+
{position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
32+
{position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
33+
{position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
34+
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
35+
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
36+
];
37+
38+
/**
39+
* @title Material Popover Edit with spreadsheet-like configuration on a Material data-table
40+
*/
41+
@Component({
42+
selector: 'popover-edit-tab-out-mat-table-example',
43+
styleUrls: ['popover-edit-tab-out-mat-table-example.css'],
44+
templateUrl: 'popover-edit-tab-out-mat-table-example.html',
45+
})
46+
export class PopoverEditTabOutMatTableExample {
47+
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
48+
dataSource = new ExampleDataSource();
49+
50+
readonly preservedNameValues = new WeakMap<PeriodicElement, any>();
51+
readonly preservedWeightValues = new WeakMap<PeriodicElement, any>();
52+
53+
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
54+
iconRegistry.addSvgIcon(
55+
'edit',
56+
sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/edit-icon.svg'));
57+
}
58+
59+
onSubmitName(element: PeriodicElement, f: NgForm) {
60+
if (!f.valid) { return; }
61+
62+
element.name = f.value.name;
63+
}
64+
65+
onSubmitWeight(element: PeriodicElement, f: NgForm) {
66+
if (!f.valid) { return; }
67+
68+
element.weight = f.value.weight;
69+
}
70+
}
71+
72+
/**
73+
* Data source to provide what data should be rendered in the table. Note that the data source
74+
* can retrieve its data in any way. In this case, the data source is provided a reference
75+
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
76+
* the underlying data. Instead, it only needs to take the data and send the table exactly what
77+
* should be rendered.
78+
*/
79+
export class ExampleDataSource extends DataSource<PeriodicElement> {
80+
/** Stream of data that is provided to the table. */
81+
data = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
82+
83+
/** Connect function called by the table to retrieve one stream containing the data to render. */
84+
connect(): Observable<PeriodicElement[]> {
85+
return this.data;
86+
}
87+
88+
disconnect() {}
89+
}

0 commit comments

Comments
 (0)