purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated Angular Material examples

Browse Source
This commit is contained in:
Sercan Yemen 2018-06-20 16:16:02 +03:00
parent faef6ec6f8
commit 13746c2a73
138 changed files with 2124 additions and 592 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
src/app/main/angular-material-elements/example-components.ts
View File

@ -95,8 +95,6 @@ import { TableHttpExample } from 'assets/angular-material-examples/table-http/ta
import { TableOverviewExample } from 'assets/angular-material-examples/table-overview/table-overview-example';
import { TablePaginationExample } from 'assets/angular-material-examples/table-pagination/table-pagination-example';
import { TableSortingExample } from 'assets/angular-material-examples/table-sorting/table-sorting-example';
import { TabsOverviewExample } from 'assets/angular-material-examples/tabs-overview/tabs-overview-example';
import { TabsTemplateLabelExample } from 'assets/angular-material-examples/tabs-template-label/tabs-template-label-example';
import { ToolbarMultirowExample } from 'assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example';
import { ToolbarOverviewExample } from 'assets/angular-material-examples/toolbar-overview/toolbar-overview-example';
import { TooltipOverviewExample } from 'assets/angular-material-examples/tooltip-overview/tooltip-overview-example';
@ -137,7 +135,6 @@ import { SliderFormattingExample } from 'assets/angular-material-examples/slider
import { StepperEditableExample } from 'assets/angular-material-examples/stepper-editable/stepper-editable-example';
import { StepperOptionalExample } from 'assets/angular-material-examples/stepper-optional/stepper-optional-example';
import { TableFooterRowExample } from 'assets/angular-material-examples/table-footer-row/table-footer-row-example';
import { TableNativeOnlyExample } from 'assets/angular-material-examples/table-native-only/table-native-only-example';
import { TextFieldAutofillDirectiveExample } from 'assets/angular-material-examples/text-field-autofill-directive/text-field-autofill-directive-example';
import { TextFieldAutofillMonitorExample } from 'assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example';
import { TextFieldAutosizeTextareaExample } from 'assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example';
@ -146,6 +143,32 @@ import { TreeDynamicExample } from 'assets/angular-material-examples/tree-dynami
import { TreeFlatOverviewExample } from 'assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example';
import { TreeLoadmoreExample } from 'assets/angular-material-examples/tree-loadmore/tree-loadmore-example';
import { TreeNestedOverviewExample } from 'assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example';
import { CdkTableBasicFlexExample } from 'assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example';
import { StepperVerticalExample } from 'assets/angular-material-examples/stepper-vertical/stepper-vertical-example';
import { TabGroupBasicExample } from 'assets/angular-material-examples/tab-group-basic/tab-group-basic-example';
import { TabGroupAsyncExample } from 'assets/angular-material-examples/tab-group-async/tab-group-async-example';
import { TabGroupCustomLabelExample } from 'assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example';
import { TabGroupDynamicExample } from 'assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example';
import { TabGroupDynamicHeightExample } from 'assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example';
import { TabGroupHeaderBelowExample } from 'assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example';
import { TabGroupLazyLoadedExample } from 'assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example';
import { TabGroupStretchedExample } from 'assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example';
import { TabGroupThemeExample } from 'assets/angular-material-examples/tab-group-theme/tab-group-theme-example';
import { TabNavBarBasicExample } from 'assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example';
import { TooltipAutoHideExample } from 'assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example';
import { TooltipCustomClassExample } from 'assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example';
import { TooltipDisabledExample } from 'assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example';
import { TooltipMessageExample } from 'assets/angular-material-examples/tooltip-message/tooltip-message-example';
import { TableBasicFlexExample } from 'assets/angular-material-examples/table-basic-flex/table-basic-flex-example';
import { TableDynamicColumnsExample } from 'assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example';
import { TableExpandableRowsExample } from 'assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example';
import { TableMultipleHeaderFooterExample } from 'assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example';
import { TableRowContextExample } from 'assets/angular-material-examples/table-row-context/table-row-context-example';
import { TableStickyColumnsExample } from 'assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example';
import { TableStickyComplexExample } from 'assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example';
import { TableStickyComplexFlexExample } from 'assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example';
import { TableStickyFooterExample } from 'assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example';
import { TableStickyHeaderExample } from 'assets/angular-material-examples/table-sticky-header/table-sticky-header-example';
export const COMPONENT_MAP = {
'autocomplete' : [
@ -176,6 +199,7 @@ export const COMPONENT_MAP = {
],
// 'cdk-table' : [
// 'cdk-table-basic',
// 'cdk-table-basic-flex',
// 'cdk-table-flat'
// ],
// 'cdk-tree' : [
@ -333,22 +357,40 @@ export const COMPONENT_MAP = {
'stepper' : [
'stepper-overview',
'stepper-editable',
'stepper-optional'
'stepper-optional',
'stepper-vertical'
],
'table' : [
'table-overview',
'table-basic',
'table-basic-flex',
'table-dynamic-columns',
'table-expandable-rows',
'table-filtering',
'table-footer-row',
'table-http',
'table-native-only',
'table-multiple-header-footer',
'table-pagination',
'table-row-context',
'table-selection',
'table-sorting'
'table-sorting',
'table-sticky-columns',
'table-sticky-complex',
'table-sticky-complex-flex',
'table-sticky-header',
'table-sticky-footer',
],
'tabs' : [
'tabs-overview',
'tabs-template-label'
'tab-group-basic',
'tab-group-async',
'tab-group-custom-label',
'tab-group-dynamic',
'tab-group-dynamic-height',
'tab-group-header-below',
'tab-group-lazy-loaded',
'tab-group-stretched',
'tab-group-theme',
'tab-nav-bar-basic'
],
'text-field' : [
'text-field-autofill-directive',
@ -361,8 +403,12 @@ export const COMPONENT_MAP = {
],
'tooltip' : [
'tooltip-overview',
'tooltip-auto-hide',
'tooltip-custom-class',
'tooltip-delay',
'tooltip-disabled',
'tooltip-manual',
'tooltip-message',
'tooltip-modified-defaults',
'tooltip-position'
],
@ -438,6 +484,10 @@ export const EXAMPLE_COMPONENTS = {
title : 'Basic CDK data-table',
component: CdkTableBasicExample
},
'cdk-table-basic-flex' : {
title : 'Basic use of `<cdk-table>` (uses display flex)',
component: CdkTableBasicFlexExample
},
'cdk-tree-flat' : {
title : 'Tree with flat nodes',
component: CdkTreeFlatExample
@ -879,10 +929,26 @@ export const EXAMPLE_COMPONENTS = {
title : 'Stepper overview',
component: StepperOverviewExample
},
'stepper-vertical' : {
title : 'Stepper vertical',
component: StepperVerticalExample
},
'table-basic' : {
title : 'Basic table',
component: TableBasicExample
},
'table-basic-flex' : {
title : 'Basic use of `<mat-table>` (uses display flex)',
component: TableBasicFlexExample
},
'table-dynamic-columns' : {
title : 'Table dynamically changing the columns displayed',
component: TableDynamicColumnsExample
},
'table-expandable-rows' : {
title : 'Table with expandable rows',
component: TableExpandableRowsExample
},
'table-filtering' : {
title : 'Table with filtering',
component: TableFilteringExample
@ -895,9 +961,9 @@ export const EXAMPLE_COMPONENTS = {
title : 'Table retrieving data through HTTP',
component: TableHttpExample
},
'table-native-only' : {
title : 'Native `<table>` that only applies the Material styles',
component: TableNativeOnlyExample
'table-multiple-header-footer' : {
title : 'Table with multiple header and footer rows',
component: TableMultipleHeaderFooterExample
},
'table-overview' : {
title : 'Data table with sorting, pagination, and filtering.',
@ -907,6 +973,10 @@ export const EXAMPLE_COMPONENTS = {
title : 'Table with pagination',
component: TablePaginationExample
},
'table-row-context' : {
title : 'Table showing each row context properties',
component: TableRowContextExample
},
'table-selection' : {
title : 'Table with selection',
component: TableSelectionExample
@ -915,13 +985,65 @@ export const EXAMPLE_COMPONENTS = {
title : 'Table with sorting',
component: TableSortingExample
},
'tabs-overview' : {
title : 'Basic tabs',
component: TabsOverviewExample
'table-sticky-columns' : {
title : 'Table with a sticky columns',
component: TableStickyColumnsExample
},
'tabs-template-label' : {
title : 'Complex Example',
component: TabsTemplateLabelExample
'table-sticky-complex' : {
title : 'Tables with toggle-able sticky headers, footers, and columns',
component: TableStickyComplexExample
},
'table-sticky-complex-flex' : {
title : 'Flex-layout tables with toggle-able sticky headers, footers, and columns',
component: TableStickyComplexFlexExample
},
'table-sticky-footer' : {
title : 'Table with a sticky footer',
component: TableStickyFooterExample
},
'table-sticky-header' : {
title : 'Table with sticky header',
component: TableStickyHeaderExample
},
'tab-group-basic' : {
title : 'Basic use of the tab group',
component: TabGroupBasicExample
},
'tab-group-async' : {
title : 'Tab group with asynchronously loading tab contents',
component: TabGroupAsyncExample
},
'tab-group-custom-label' : {
title : 'Using tabs with a custom label template',
component: TabGroupCustomLabelExample
},
'tab-group-dynamic' : {
title : 'Tab group with dynamically changing tabs',
component: TabGroupDynamicExample
},
'tab-group-dynamic-height' : {
title : 'Tab group with dynamic height based on tab contents',
component: TabGroupDynamicHeightExample
},
'tab-group-header-below' : {
title : 'Tab group with the headers on the bottom',
component: TabGroupHeaderBelowExample
},
'tab-group-lazy-loaded' : {
title : 'Tab group where the tab content is loaded lazily (when activated)',
component: TabGroupLazyLoadedExample
},
'tab-group-stretched' : {
title : 'Tab group with stretched labels',
component: TabGroupStretchedExample
},
'tab-group-theme' : {
title : 'Customizing the theme options on the tab group',
component: TabGroupThemeExample
},
'tab-nav-bar-basic' : {
title : 'Basic use of the tab nav bar',
component: TabNavBarBasicExample
},
'text-field-autofill-directive' : {
title : 'Monitoring autofill state with cdkAutofill',
@ -943,14 +1065,30 @@ export const EXAMPLE_COMPONENTS = {
title : 'Basic toolbar',
component: ToolbarOverviewExample
},
'tooltip-auto-hide' : {
title : 'Tooltip that demonstrates auto-hiding when it clips out of its scrolling container',
component: TooltipAutoHideExample
},
'tooltip-custom-class' : {
title : 'Tooltip that can have a custom class applied',
component: TooltipCustomClassExample
},
'tooltip-delay' : {
title : 'Tooltip with a show and hide delay',
component: TooltipDelayExample
},
'tooltip-disabled' : {
title : 'Tooltip that can be disabled',
component: TooltipDisabledExample
},
'tooltip-manual' : {
title : 'Tooltip that can be manually shown/hidden.',
title : 'Tooltip that can be manually shown/hidden',
component: TooltipManualExample
},
'tooltip-message' : {
title : 'Tooltip with a changing message',
component: TooltipMessageExample
},
'tooltip-modified-defaults' : {
title : 'Tooltip with a show and hide delay',
component: TooltipModifiedDefaultsExample
@ -1001,6 +1139,7 @@ export const EXAMPLE_LIST = [
CardFancyExample,
CardOverviewExample,
CdkTableBasicExample,
CdkTableBasicFlexExample,
CdkTreeFlatExample,
CdkTreeNestedExample,
CheckboxConfigurableExample,
@ -1108,24 +1247,47 @@ export const EXAMPLE_LIST = [
StepperEditableExample,
StepperOptionalExample,
StepperOverviewExample,
StepperVerticalExample,
TableBasicExample,
TableBasicFlexExample,
TableDynamicColumnsExample,
TableExpandableRowsExample,
TableFilteringExample,
TableFooterRowExample,
TableHttpExample,
TableNativeOnlyExample,
TableMultipleHeaderFooterExample,
TableOverviewExample,
TablePaginationExample,
TableRowContextExample,
TableSelectionExample,
TableSortingExample,
TabsOverviewExample,
TabsTemplateLabelExample,
TableStickyColumnsExample,
TableStickyComplexExample,
TableStickyComplexFlexExample,
TableStickyFooterExample,
TableStickyHeaderExample,
TabGroupBasicExample,
TabGroupAsyncExample,
TabGroupCustomLabelExample,
TabGroupDynamicExample,
TabGroupDynamicHeightExample,
TabGroupHeaderBelowExample,
TabGroupLazyLoadedExample,
TabGroupStretchedExample,
TabGroupStretchedExample,
TabGroupThemeExample,
TabNavBarBasicExample,
TextFieldAutofillDirectiveExample,
TextFieldAutofillMonitorExample,
TextFieldAutosizeTextareaExample,
ToolbarMultirowExample,
ToolbarOverviewExample,
TooltipAutoHideExample,
TooltipCustomClassExample,
TooltipDelayExample,
TooltipDisabledExample,
TooltipManualExample,
TooltipMessageExample,
TooltipModifiedDefaultsExample,
TooltipOverviewExample,
TooltipPositionExample,

4
src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
View File

@ -1,4 +1,4 @@
import {Component} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
@ -11,7 +11,7 @@ import {map, startWith} from 'rxjs/operators';
templateUrl: 'autocomplete-auto-active-first-option-example.html',
styleUrls: ['autocomplete-auto-active-first-option-example.css']
})
export class AutocompleteAutoActiveFirstOptionExample {
export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
myControl: FormControl = new FormControl();
options = ['One', 'Two', 'Three'];
filteredOptions: Observable<string[]>;

4
src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts
View File

@ -1,4 +1,4 @@
import {Component} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
@ -15,7 +15,7 @@ export class User {
templateUrl: 'autocomplete-display-example.html',
styleUrls: ['autocomplete-display-example.css']
})
export class AutocompleteDisplayExample {
export class AutocompleteDisplayExample implements OnInit {
myControl = new FormControl();

4
src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts
View File

@ -1,4 +1,4 @@
import {Component} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
@ -11,7 +11,7 @@ import {map, startWith} from 'rxjs/operators';
templateUrl: 'autocomplete-filter-example.html',
styleUrls: ['autocomplete-filter-example.css']
})
export class AutocompleteFilterExample {
export class AutocompleteFilterExample implements OnInit {
myControl: FormControl = new FormControl();

10
src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css Executable file
View File

@ -0,0 +1,10 @@
/**
* Add basic flex styling so that the cells evenly space themselves in the row.
*/
cdk-row, cdk-header-row, cdk-footer-row {
display: flex;
}
cdk-cell, cdk-header-cell, cdk-footer-cell {
flex: 1;
}

28
src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html Executable file
View File

@ -0,0 +1,28 @@
<cdk-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container cdkColumnDef="position">
<cdk-header-cell *cdkHeaderCellDef> No. </cdk-header-cell>
<cdk-cell *cdkCellDef="let element"> {{element.position}} </cdk-cell>
</ng-container>
<!-- Name Column -->
<ng-container cdkColumnDef="name">
<cdk-header-cell *cdkHeaderCellDef> Name </cdk-header-cell>
<cdk-cell *cdkCellDef="let element"> {{element.name}} </cdk-cell>
</ng-container>
<!-- Weight Column -->
<ng-container cdkColumnDef="weight">
<cdk-header-cell *cdkHeaderCellDef> Weight </cdk-header-cell>
<cdk-cell *cdkCellDef="let element"> {{element.weight}} </cdk-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container cdkColumnDef="symbol">
<cdk-header-cell *cdkHeaderCellDef> Symbol </cdk-header-cell>
<cdk-cell *cdkCellDef="let element"> {{element.symbol}} </cdk-cell>
</ng-container>
<cdk-header-row *cdkHeaderRowDef="displayedColumns"></cdk-header-row>
<cdk-row *cdkRowDef="let row; columns: displayedColumns;"></cdk-row>
</cdk-table>

55
src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts Executable file
View File

@ -0,0 +1,55 @@
import {DataSource} from '@angular/cdk/collections';
import {Component} from '@angular/core';
import {BehaviorSubject, Observable} from 'rxjs';
/**
* @title Basic use of `<cdk-table>` (uses display flex)
*/
@Component({
selector: 'cdk-table-basic-flex-example',
styleUrls: ['cdk-table-basic-flex-example.css'],
templateUrl: 'cdk-table-basic-flex-example.html',
})
export class CdkTableBasicFlexExample {
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new ExampleDataSource();
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];
/**
* Data source to provide what data should be rendered in the table. Note that the data source
* can retrieve its data in any way. In this case, the data source is provided a reference
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
* the underlying data. Instead, it only needs to take the data and send the table exactly what
* should be rendered.
*/
export class ExampleDataSource extends DataSource<PeriodicElement> {
/** Stream of data that is provided to the table. */
data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<PeriodicElement[]> {
return this.data;
}
disconnect() {}
}

40
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css
View File

@ -1,39 +1,7 @@
/* Structure */
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
table {
width: 100%;
}
/*
* Styles to make the demo's cdk-table match the material design spec
* https://material.io/guidelines/components/data-tables.html
*/
.example-table {
flex: 1 1 auto;
overflow: auto;
max-height: 500px;
}
.example-header-row, .example-row {
display: flex;
border-bottom: 1px solid #ccc;
align-items: center;
height: 32px;
padding: 0 8px;
}
.example-cell, .example-header-cell {
flex: 1;
}
.example-header-cell {
font-size: 12px;
font-weight: bold;
color: rgba(0, 0, 0, 0.54);
}
.example-cell {
font-size: 13px;
color: rgba(0, 0, 0, 0.87);
th {
text-align: left;
}

50
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html
View File

@ -1,36 +1,28 @@
<div class="example-container mat-elevation-z8">
<cdk-table #table [dataSource]="dataSource" class="example-table">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- ID Column -->
<ng-container cdkColumnDef="userId">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> ID </cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.id}} </cdk-cell>
</ng-container>
<!-- Progress Column -->
<ng-container cdkColumnDef="progress">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Progress </cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.progress}}% </cdk-cell>
<table cdk-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container cdkColumnDef="position">
<th cdk-header-cell *cdkHeaderCellDef> No. </th>
<td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container cdkColumnDef="userName">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Name </cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.name}} </cdk-cell>
<ng-container cdkColumnDef="name">
<th cdk-header-cell *cdkHeaderCellDef> Name </th>
<td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Color Column -->
<ng-container cdkColumnDef="color">
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Color</cdk-header-cell>
<cdk-cell *cdkCellDef="let row" class="example-cell"
[style.color]="row.color">
{{row.color}}
</cdk-cell>
<!-- Weight Column -->
<ng-container cdkColumnDef="weight">
<th cdk-header-cell *cdkHeaderCellDef> Weight </th>
<td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
</ng-container>
<cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row>
<cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"></cdk-row>
</cdk-table>
</div>
<!-- Symbol Column -->
<ng-container cdkColumnDef="symbol">
<th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
<td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
<tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
</table>

79
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts
View File

@ -11,61 +11,29 @@ import {BehaviorSubject, Observable} from 'rxjs';
templateUrl: 'cdk-table-basic-example.html',
})
export class CdkTableBasicExample {
displayedColumns = ['userId', 'userName', 'progress', 'color'];
exampleDatabase = new ExampleDatabase();
dataSource: ExampleDataSource | null;
ngOnInit() {
this.dataSource = new ExampleDataSource(this.exampleDatabase);
}
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new ExampleDataSource();
}
/** Constants used to fill up our data base. */
const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
export interface UserData {
id: string;
export interface PeriodicElement {
name: string;
progress: string;
color: string;
position: number;
weight: number;
symbol: string;
}
/** An example database that the data source uses to retrieve data for the table. */
export class ExampleDatabase {
/** Stream that emits whenever the data has been modified. */
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
get data(): UserData[] { return this.dataChange.value; }
constructor() {
// Fill up the database with 100 users.
for (let i = 0; i < 100; i++) { this.addUser(); }
}
/** Adds a new user to the database. */
addUser() {
const copiedData = this.data.slice();
copiedData.push(this.createNewUser());
this.dataChange.next(copiedData);
}
/** Builds and returns a new User. */
private createNewUser() {
const name =
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
return {
id: (this.data.length + 1).toString(),
name: name,
progress: Math.round(Math.random() * 100).toString(),
color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
};
}
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];
/**
* Data source to provide what data should be rendered in the table. Note that the data source
@ -74,14 +42,13 @@ export class ExampleDatabase {
* the underlying data. Instead, it only needs to take the data and send the table exactly what
* should be rendered.
*/
export class ExampleDataSource extends DataSource<any> {
constructor(private _exampleDatabase: ExampleDatabase) {
super();
}
export class ExampleDataSource extends DataSource<PeriodicElement> {
/** Stream of data that is provided to the table. */
data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<UserData[]> {
return this._exampleDatabase.dataChange;
connect(): Observable<PeriodicElement[]> {
return this.data;
}
disconnect() {}

10
src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts
View File

@ -1,7 +1,7 @@
import {Component, Injectable} from '@angular/core';
import {FlatTreeControl} from '@angular/cdk/tree';
import {MatTreeFlattener, MatTreeFlatDataSource} from '@angular/material/tree';
import {of, Observable, BehaviorSubject} from 'rxjs';
import {Component, Injectable} from '@angular/core';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {BehaviorSubject, Observable, of as observableOf} from 'rxjs';
/**
* File node data with nested structure.
@ -154,7 +154,9 @@ export class CdkTreeFlatExample {
private _isExpandable = (node: FileFlatNode) => { return node.expandable; };
private _getChildren = (node: FileNode): Observable<FileNode[]> => { return of(node.children); };
private _getChildren = (node: FileNode): Observable<FileNode[]> => {
return observableOf(node.children);
}
hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
}

6
src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts
View File

@ -1,7 +1,7 @@
import {Component, Injectable} from '@angular/core';
import {NestedTreeControl} from '@angular/cdk/tree';
import {Component, Injectable} from '@angular/core';
import {MatTreeNestedDataSource} from '@angular/material/tree';
import {of, BehaviorSubject} from 'rxjs';
import {BehaviorSubject, of as observableOf} from 'rxjs';
/**
* Json node data with nested structure. Each node has a filename and a value or a list of children
@ -125,7 +125,7 @@ export class CdkTreeNestedExample {
database.dataChange.subscribe(data => this.nestedDataSource.data = data);
}
private _getChildren = (node: FileNode) => { return of(node.children); };
private _getChildren = (node: FileNode) => { return observableOf(node.children); };
hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); };
}

2
src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html
View File

@ -5,7 +5,7 @@
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit)">
{{fruit.name}}
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input

16
src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts
View File

@ -26,14 +26,15 @@ export class ChipsAutocompleteExample {
filteredFruits: Observable<any[]>;
fruits = [
{ name: 'Lemon' },
'Lemon',
];
allFruits = [
'Orange',
'Strawberry',
'Lime',
'Apple',
'Lemon',
'Lime',
'Orange',
'Strawberry'
];
@ViewChild('fruitInput') fruitInput: ElementRef;
@ -50,13 +51,15 @@ export class ChipsAutocompleteExample {
// Add our fruit
if ((value || '').trim()) {
this.fruits.push({ name: value.trim() });
this.fruits.push(value.trim());
}
// Reset the input value
if (input) {
input.value = '';
}
this.fruitCtrl.setValue(null);
}
remove(fruit: any): void {
@ -73,7 +76,8 @@ export class ChipsAutocompleteExample {
}
selected(event: MatAutocompleteSelectedEvent): void {
this.fruits.push({ name: event.option.viewValue });
this.fruits.push(event.option.viewValue);
this.fruitInput.nativeElement.value = '';
this.fruitCtrl.setValue(null);
}
}

5
src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts
View File

@ -9,10 +9,9 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
// the `default as` syntax.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
// import {default as _rollupMoment} from 'moment';
import {default as _rollupMoment} from 'moment';
// const moment = _rollupMoment || _moment;
const moment = _moment;
const moment = _rollupMoment || _moment;
// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/

5
src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts
View File

@ -9,10 +9,9 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
// the `default as` syntax.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
// import {default as _rollupMoment} from 'moment';
import {default as _rollupMoment} from 'moment';
// const moment = _rollupMoment || _moment;
const moment = _moment;
const moment = _rollupMoment || _moment;
/** @title Datepicker that uses Moment.js dates */
@Component({

6
src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts
View File

@ -9,12 +9,10 @@ import {MatDatepicker} from '@angular/material/datepicker';
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
// the `default as` syntax.
import * as _moment from 'moment';
import { Moment } from 'moment';
// tslint:disable-next-line:no-duplicate-imports
// import {default as _rollupMoment, Moment} from 'moment';
import {default as _rollupMoment, Moment} from 'moment';
// const moment = _rollupMoment || _moment;
const moment = _moment;
const moment = _rollupMoment || _moment;
// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/

2
src/assets/angular-material-examples/icon-svg/icon-svg-example.ts
View File

@ -14,6 +14,6 @@ export class IconSvgExample {
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIcon(
'thumbs-up',
sanitizer.bypassSecurityTrustResourceUrl('assets/images/examples/thumbup-icon.svg'));
sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
}
}

4
src/assets/angular-material-examples/sidenav-responsive/sidenav-responsive-example.ts
View File

@ -1,5 +1,5 @@
import {MediaMatcher} from '@angular/cdk/layout';
import {ChangeDetectorRef, Component} from '@angular/core';
import {ChangeDetectorRef, Component, OnDestroy} from '@angular/core';
/** @title Responsive sidenav */
@Component({
@ -7,7 +7,7 @@ import {ChangeDetectorRef, Component} from '@angular/core';
templateUrl: 'sidenav-responsive-example.html',
styleUrls: ['sidenav-responsive-example.css'],
})
export class SidenavResponsiveExample {
export class SidenavResponsiveExample implements OnDestroy {
mobileQuery: MediaQueryList;
fillerNav = Array(50).fill(0).map((_, i) => `Nav Item ${i + 1}`);

4
src/assets/angular-material-examples/stepper-editable/stepper-editable-example.ts
View File

@ -1,4 +1,4 @@
import {Component} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
/**
@ -9,7 +9,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
templateUrl: 'stepper-editable-example.html',
styleUrls: ['stepper-editable-example.css']
})
export class StepperEditableExample {
export class StepperEditableExample implements OnInit {
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
isEditable: boolean = false;

4
src/assets/angular-material-examples/stepper-optional/stepper-optional-example.ts
View File

@ -1,4 +1,4 @@
import {Component} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
/**
@ -9,7 +9,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
templateUrl: 'stepper-optional-example.html',
styleUrls: ['stepper-optional-example.css']
})
export class StepperOptionalExample {
export class StepperOptionalExample implements OnInit {
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
isOptional: boolean = false;

4
src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts
View File

@ -1,4 +1,4 @@
import {Component} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
/**
@ -9,7 +9,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
templateUrl: 'stepper-overview-example.html',
styleUrls: ['stepper-overview-example.css']
})
export class StepperOverviewExample {
export class StepperOverviewExample implements OnInit {
isLinear = false;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;

0
src/assets/angular-material-examples/tabs-overview/tabs-overview-example.css → src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.css
View File

36
src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.html Executable file
View File

@ -0,0 +1,36 @@
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-vertical-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-vertical-stepper>

27
src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts Executable file
View File

@ -0,0 +1,27 @@
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
/**
* @title Stepper vertical
*/
@Component({
selector: 'stepper-vertical',
templateUrl: 'stepper-vertical-example.html',
styleUrls: ['stepper-vertical-example.css']
})
export class StepperVerticalExample implements OnInit {
isLinear = false;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
constructor(private _formBuilder: FormBuilder) { }
ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
secondCtrl: ['', Validators.required]
});
}
}

1
src/assets/angular-material-examples/tab-group-async/tab-group-async-example.css Executable file
View File

@ -0,0 +1 @@
/** No CSS for this example */

10
src/assets/angular-material-examples/tab-group-async/tab-group-async-example.html Executable file
View File

@ -0,0 +1,10 @@
<ng-container *ngIf="(asyncTabs | async) === null">
Loading tabs...
</ng-container>
<mat-tab-group>
<mat-tab *ngFor="let tab of asyncTabs | async">
<ng-template mat-tab-label>{{tab.label}}</ng-template>
{{tab.content}}
</mat-tab>
</mat-tab-group>

31
src/assets/angular-material-examples/tab-group-async/tab-group-async-example.ts Executable file
View File

@ -0,0 +1,31 @@
import {Component} from '@angular/core';
import {Observable, Observer} from 'rxjs';
export interface ExampleTab {
label: string;
content: string;
}
/**
* @title Tab group with asynchronously loading tab contents
*/
@Component({
selector: 'tab-group-async-example',
templateUrl: 'tab-group-async-example.html',
styleUrls: ['tab-group-async-example.css'],
})
export class TabGroupAsyncExample {
asyncTabs: Observable<ExampleTab[]>;
constructor() {
this.asyncTabs = Observable.create((observer: Observer<ExampleTab[]>) => {
setTimeout(() => {
observer.next([
{label: 'First', content: 'Content 1'},
{label: 'Second', content: 'Content 2'},
{label: 'Third', content: 'Content 3'},
]);
}, 1000);
});
}
}

1
src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.css Executable file
View File

@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.html Executable file
View File

@ -0,0 +1,5 @@
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

11
src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.ts Executable file
View File

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Basic use of the tab group
*/
@Component({
selector: 'tab-group-basic-example',
templateUrl: 'tab-group-basic-example.html',
styleUrls: ['tab-group-basic-example.css'],
})
export class TabGroupBasicExample {}

3
src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.css Executable file
View File

@ -0,0 +1,3 @@
.example-tab-icon {
margin-right: 8px;
}

26
src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.html Executable file
View File

@ -0,0 +1,26 @@
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
First
</ng-template>
Content 1
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
Second
</ng-template>
Content 2
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
Third
</ng-template>
Content 3
</mat-tab>
</mat-tab-group>

11
src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.ts Executable file
View File

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Using tabs with a custom label template
*/
@Component({
selector: 'tab-group-custom-label-example',
templateUrl: 'tab-group-custom-label-example.html',
styleUrls: ['tab-group-custom-label-example.css'],
})
export class TabGroupCustomLabelExample {}

18
src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.css Executable file
View File

@ -0,0 +1,18 @@
.example-small-box, .example-large-box {
display: flex;
align-items: center;
justify-content: center;
margin: 16px;
padding: 16px;
border-radius: 8px;
}
.example-small-box {
height: 100px;
width: 100px;
}
.example-large-box {
height: 300px;
width: 300px;
}

12
src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.html Executable file
View File

@ -0,0 +1,12 @@
<mat-tab-group dynamicHeight>
<mat-tab label="Short tab">
<div class="example-small-box mat-elevation-z4">
Small content
</div>
</mat-tab>
<mat-tab label="Long tab">
<div class="example-large-box mat-elevation-z4">
Large content
</div>
</mat-tab>
</mat-tab-group>

11
src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.ts Executable file
View File

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Tag group with dynamic height based on tab contents
*/
@Component({
selector: 'tab-group-dynamic-height-example',
templateUrl: 'tab-group-dynamic-height-example.html',
styleUrls: ['tab-group-dynamic-height-example.css'],
})
export class TabGroupDynamicHeightExample {}

5
src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.css Executable file
View File

@ -0,0 +1,5 @@
.example-input-label,
.example-add-tab-button,
.example-delete-tab-button {
margin: 8px;
}

29
src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.html Executable file
View File

@ -0,0 +1,29 @@
<div>
<span class="example-input-label"> Selected tab index: </span>
<mat-form-field>
<input matInput type="number" [formControl]="selected">
</mat-form-field>
</div>
<div>
<button mat-raised-button
class="example-add-tab-button"
(click)="addTab(selectAfterAdding.checked)">
Add new tab
</button>
<mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
</div>
<mat-tab-group [selectedIndex]="selected.value"
(selectedIndexChange)="selected.setValue($event)">
<mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
Contents for {{tab}} tab
<button mat-raised-button
class="example-delete-tab-button"
[disabled]="tabs.length === 1"
(click)="removeTab(index)">
Delete Tab
</button>
</mat-tab>
</mat-tab-group>

27
src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.ts Executable file
View File

@ -0,0 +1,27 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
/**
* @title Tag group with dynamically changing tabs
*/
@Component({
selector: 'tab-group-dynamic-example',
templateUrl: 'tab-group-dynamic-example.html',
styleUrls: ['tab-group-dynamic-example.css'],
})
export class TabGroupDynamicExample {
tabs = ['First', 'Second', 'Third'];
selected = new FormControl(0);
addTab(selectAfterAdding: boolean) {
this.tabs.push('New');
if (selectAfterAdding) {
this.selected.setValue(this.tabs.length - 1);
}
}
removeTab(index: number) {
this.tabs.splice(index, 1);
}
}

1
src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.css Executable file
View File

@ -0,0 +1 @@
/** No CSS for this example */

5
src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.html Executable file
View File

@ -0,0 +1,5 @@
<mat-tab-group headerPosition="below">
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

11
src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.ts Executable file
View File

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Tab group with the headers on the bottom
*/
@Component({
selector: 'tab-group-header-below-example',
templateUrl: 'tab-group-header-below-example.html',
styleUrls: ['tab-group-header-below-example.css'],
})
export class TabGroupHeaderBelowExample {}

1
src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.css Executable file
View File

@ -0,0 +1 @@
/** No CSS for this example */

17
src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html Executable file
View File

@ -0,0 +1,17 @@
<mat-tab-group>
<mat-tab label="First">
<ng-template matTabContent>
Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
</ng-template>
</mat-tab>
<mat-tab label="Second">
<ng-template matTabContent>
Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}}
</ng-template>
</mat-tab>
<mat-tab label="Third">
<ng-template matTabContent>
Content 3 - Loaded: {{getTimeLoaded(3) | date:'medium'}}
</ng-template>
</mat-tab>
</mat-tab-group>

21
src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts Executable file
View File

@ -0,0 +1,21 @@
import {Component} from '@angular/core';
/**
* @title Tab group where the tab content is loaded lazily (when activated)
*/
@Component({
selector: 'tab-group-lazy-loaded-example',
templateUrl: 'tab-group-lazy-loaded-example.html',
styleUrls: ['tab-group-lazy-loaded-example.css'],
})
export class TabGroupLazyLoadedExample {
tabLoadTimes: Date[] = [];
getTimeLoaded(index: number) {
if (!this.tabLoadTimes[index]) {
this.tabLoadTimes[index] = new Date();
}
return this.tabLoadTimes[index];
}
}

3
src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.css Executable file
View File

@ -0,0 +1,3 @@
.example-stretched-tabs {
max-width: 800px;
}

5
src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.html Executable file
View File

@ -0,0 +1,5 @@
<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4">
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

11
src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.ts Executable file
View File

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Tab group with stretched labels
*/
@Component({
selector: 'tab-group-stretched-example',
templateUrl: 'tab-group-stretched-example.html',
styleUrls: ['tab-group-stretched-example.css'],
})
export class TabGroupStretchedExample {}

4
src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.css Executable file
View File

@ -0,0 +1,4 @@
.example-button-toggle-label {
display: inline-block;
margin: 16px;
}

25
src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.html Executable file
View File

@ -0,0 +1,25 @@
<div>
<mat-button-toggle-group #colorToggle="matButtonToggleGroup"
value="primary"
aria-label="Change color">
<mat-button-toggle value="primary"> Primary </mat-button-toggle>
<mat-button-toggle value="accent"> Accent </mat-button-toggle>
</mat-button-toggle-group>
<span class="example-button-toggle-label"> Color </span>
</div>
<div>
<mat-button-toggle-group #backgroundColorToggle="matButtonToggleGroup"
value="primary"
aria-label="Change color">
<mat-button-toggle value="primary"> Primary </mat-button-toggle>
<mat-button-toggle value="accent"> Accent </mat-button-toggle>
</mat-button-toggle-group>
<span class="example-button-toggle-label"> Background Color </span>
</div>
<mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

11
src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.ts Executable file
View File

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Customizing the theme options on the tab group
*/
@Component({
selector: 'tab-group-theme-example',
templateUrl: 'tab-group-theme-example.html',
styleUrls: ['tab-group-theme-example.css'],
})
export class TabGroupThemeExample {}

3
src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.css Executable file
View File

@ -0,0 +1,3 @@
.example-action-button {
margin-bottom: 8px;
}

12
src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html Executable file
View File

@ -0,0 +1,12 @@
<button mat-raised-button
class="example-action-button"
(click)="toggleBackground()">
Toggle background
</button>
<nav mat-tab-nav-bar [backgroundColor]="background">
<a mat-tab-link *ngFor="let link of links"
(click)="activeLink = link"
[active]="activeLink == link"> {{ link }} </a>
<a mat-tab-link disabled>Disabled Link</a>
</nav>

19
src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.ts Executable file
View File

@ -0,0 +1,19 @@
import {Component} from '@angular/core';
/**
* @title Basic use of the tab nav bar
*/
@Component({
selector: 'tab-nav-bar-basic-example',
templateUrl: 'tab-nav-bar-basic-example.html',
styleUrls: ['tab-nav-bar-basic-example.css'],
})
export class TabNavBarBasicExample {
links = ['First', 'Second', 'Third'];
activeLink = this.links[0];
background = '';
toggleBackground() {
this.background = this.background ? '' : 'primary';
}
}

3
src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.css Executable file
View File

@ -0,0 +1,3 @@
table {
width: 100%;
}

28
src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.html Executable file
View File

@ -0,0 +1,28 @@
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

34
src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.ts Executable file
View File

@ -0,0 +1,34 @@
import {Component} from '@angular/core';
/**
* @title Basic use of `<mat-table>` (uses display flex)
*/
@Component({
selector: 'table-basic-flex-example',
styleUrls: ['table-basic-flex-example.css'],
templateUrl: 'table-basic-flex-example.html',
})
export class TableBasicFlexExample {
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

8
src/assets/angular-material-examples/table-basic/table-basic-example.css
View File

@ -1,7 +1,3 @@
.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
overflow: auto;
table {
width: 100%;
}

5
src/assets/angular-material-examples/table-basic/table-basic-example.html
View File

@ -1,5 +1,4 @@
<div class="example-container mat-elevation-z8">
<table mat-table #table [dataSource]="dataSource">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
@ -31,4 +30,4 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>

16
src/assets/angular-material-examples/table-basic/table-basic-example.ts
View File

@ -1,7 +1,7 @@
import {Component} from '@angular/core';
/**
* @title Basic table
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
@ -13,14 +13,14 @@ export class TableBasicExample {
dataSource = ELEMENT_DATA;
}
export interface Element {
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
@ -31,14 +31,4 @@ const ELEMENT_DATA: Element[] = [
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
{position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
{position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
{position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
{position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
{position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
{position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
{position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
{position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

7
src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.css Executable file
View File

@ -0,0 +1,7 @@
table {
width: 100%;
}
button {
margin: 16px 8px;
}

13
src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.html Executable file
View File

@ -0,0 +1,13 @@
<button mat-raised-button (click)="addColumn()"> Add column </button>
<button mat-raised-button (click)="removeColumn()"> Remove column </button>
<button mat-raised-button (click)="shuffle()"> Shuffle </button>
<table mat-table [dataSource]="data" class="mat-elevation-z8">
<ng-container matColumnDef="{{column}}" *ngFor="let column of definedColumns">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>

59
src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.ts Executable file
View File

@ -0,0 +1,59 @@
import {Component} from '@angular/core';
/**
* @title Table dynamically changing the columns displayed
*/
@Component({
selector: 'table-dynamic-columns-example',
styleUrls: ['table-dynamic-columns-example.css'],
templateUrl: 'table-dynamic-columns-example.html',
})
export class TableDynamicColumnsExample {
definedColumns = ['name', 'weight', 'symbol', 'position'];
columnsToDisplay = this.definedColumns.slice();
data: PeriodicElement[] = ELEMENT_DATA;
addColumn() {
const randomColumn = Math.floor(Math.random() * this.definedColumns.length);
this.columnsToDisplay.push(this.definedColumns[randomColumn]);
}
removeColumn() {
if (this.columnsToDisplay.length) {
this.columnsToDisplay.pop();
}
}
shuffle() {
let currentIndex = this.columnsToDisplay.length;
while (0 !== currentIndex) {
let randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// Swap
let temp = this.columnsToDisplay[currentIndex];
this.columnsToDisplay[currentIndex] = this.columnsToDisplay[randomIndex];
this.columnsToDisplay[randomIndex] = temp;
}
}
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

47
src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.css Executable file
View File

@ -0,0 +1,47 @@
table {
width: 100%;
}
tr.example-detail-row {
height: 0;
}
tr.example-element-row:not(.example-expanded-row):hover {
background: #f5f5f5;
}
tr.example-element-row:not(.example-expanded-row):active {
background: #efefef;
}
.example-element-row td {
border-bottom-width: 0;
}
.example-element-detail {
overflow: hidden;
display: flex;
}
.example-element-diagram {
min-width: 80px;
border: 2px solid black;
padding: 8px;
font-weight: lighter;
margin: 8px 0;
height: 104px;
}
.example-element-symbol {
font-weight: bold;
font-size: 40px;
line-height: normal;
}
.example-element-description {
padding: 16px;
}
.example-element-description-attribution {
opacity: 0.5;
}

35
src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.html Executable file
View File

@ -0,0 +1,35 @@
<table mat-table
[dataSource]="dataSource" multiTemplateDataRows
class="mat-elevation-z8">
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
<div class="example-element-detail"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<div class="example-element-diagram">
<div class="example-element-position"> {{element.position}} </div>
<div class="example-element-symbol"> {{element.symbol}} </div>
<div class="example-element-name"> {{element.name}} </div>
<div class="example-element-weight"> {{element.weight}} </div>
</div>
<div class="example-element-description">
{{element.description}}
<span class="example-element-description-attribution"> -- Wikipedia </span>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

113
src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.ts Executable file
View File

@ -0,0 +1,113 @@
import {Component} from '@angular/core';
import {animate, state, style, transition, trigger} from '@angular/animations';
/**
* @title Table with expandable rows
*/
@Component({
selector: 'table-expandable-rows-example',
styleUrls: ['table-expandable-rows-example.css'],
templateUrl: 'table-expandable-rows-example.html',
animations: [
trigger('detailExpand', [
state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
state('expanded', style({height: '*'})),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
})
export class TableExpandableRowsExample {
dataSource = ELEMENT_DATA;
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
expandedElement: PeriodicElement;
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
description: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{
position: 1,
name: 'Hydrogen',
weight: 1.0079,
symbol: 'H',
description: `Hydrogen is a chemical element with symbol H and atomic number 1. With a standard
atomic weight of 1.008, hydrogen is the lightest element on the periodic table.`
}, {
position: 2,
name: 'Helium',
weight: 4.0026,
symbol: 'He',
description: `Helium is a chemical element with symbol He and atomic number 2. It is a
colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas
group in the periodic table. Its boiling point is the lowest among all the elements.`
}, {
position: 3,
name: 'Lithium',
weight: 6.941,
symbol: 'Li',
description: `Lithium is a chemical element with symbol Li and atomic number 3. It is a soft,
silvery-white alkali metal. Under standard conditions, it is the lightest metal and the
lightest solid element.`
}, {
position: 4,
name: 'Beryllium',
weight: 9.0122,
symbol: 'Be',
description: `Beryllium is a chemical element with symbol Be and atomic number 4. It is a
relatively rare element in the universe, usually occurring as a product of the spallation of
larger atomic nuclei that have collided with cosmic rays.`
}, {
position: 5,
name: 'Boron',
weight: 10.811,
symbol: 'B',
description: `Boron is a chemical element with symbol B and atomic number 5. Produced entirely
by cosmic ray spallation and supernovae and not by stellar nucleosynthesis, it is a
low-abundance element in the Solar system and in the Earth's crust.`
}, {
position: 6,
name: 'Carbon',
weight: 12.0107,
symbol: 'C',
description: `Carbon is a chemical element with symbol C and atomic number 6. It is nonmetallic
and tetravalent—making four electrons available to form covalent chemical bonds. It belongs
to group 14 of the periodic table.`
}, {
position: 7,
name: 'Nitrogen',
weight: 14.0067,
symbol: 'N',
description: `Nitrogen is a chemical element with symbol N and atomic number 7. It was first
discovered and isolated by Scottish physician Daniel Rutherford in 1772.`
}, {
position: 8,
name: 'Oxygen',
weight: 15.9994,
symbol: 'O',
description: `Oxygen is a chemical element with symbol O and atomic number 8. It is a member of
the chalcogen group on the periodic table, a highly reactive nonmetal, and an oxidizing
agent that readily forms oxides with most elements as well as with other compounds.`
}, {
position: 9,
name: 'Fluorine',
weight: 18.9984,
symbol: 'F',
description: `Fluorine is a chemical element with symbol F and atomic number 9. It is the
lightest halogen and exists as a highly toxic pale yellow diatomic gas at standard
conditions.`
}, {
position: 10,
name: 'Neon',
weight: 20.1797,
symbol: 'Ne',
description: `Neon is a chemical element with symbol Ne and atomic number 10. It is a noble gas.
Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about
two-thirds the density of air.`
},
];

13
src/assets/angular-material-examples/table-filtering/table-filtering-example.css
View File

@ -1,15 +1,6 @@
/* Structure */
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
max-height: 500px;
overflow: auto;
}
.example-header {
min-height: 64px;
padding: 8px 24px 0;
table {
width: 100%;
}
.mat-form-field {

6
src/assets/angular-material-examples/table-filtering/table-filtering-example.html
View File

@ -1,11 +1,8 @@
<div class="example-container mat-elevation-z8">
<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<table mat-table #table [dataSource]="dataSource">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
@ -34,4 +31,3 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>

14
src/assets/angular-material-examples/table-filtering/table-filtering-example.ts
View File

@ -20,14 +20,14 @@ export class TableFilteringExample {
}
}
export interface Element {
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
@ -38,14 +38,4 @@ const ELEMENT_DATA: Element[] = [
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
{position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
{position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
{position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
{position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
{position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
{position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
{position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
{position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

12
src/assets/angular-material-examples/table-footer-row/table-footer-row-example.css
View File

@ -1,11 +1,7 @@
.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
table {
width: 100%;
}
.mat-table {
overflow: auto;
max-height: 500px;
tr.mat-footer-row {
font-weight: bold;
}

25
src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html
View File

@ -1,22 +1,19 @@
<div class="example-container mat-elevation-z8">
<mat-table [dataSource]="transactions">
<table mat-table [dataSource]="transactions" class="mat-elevation-z8">
<!-- Item Column -->
<ng-container matColumnDef="item">
<mat-header-cell *matHeaderCellDef> Item </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{transaction.item}} </mat-cell>
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
<th mat-header-cell *matHeaderCellDef> Item </th>
<td mat-cell *matCellDef="let transaction"> {{transaction.item}} </td>
<td mat-footer-cell *matFooterCellDef> Total </td>
</ng-container>
<!-- Cost Column -->
<ng-container matColumnDef="cost">
<mat-header-cell *matHeaderCellDef> Cost </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </mat-cell>
<mat-footer-cell *matFooterCellDef> getTotalCost() </mat-footer-cell>
<th mat-header-cell *matHeaderCellDef> Cost </th>
<td mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </td>
<td mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </td>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
</mat-table>
</div>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>

17
src/assets/angular-material-examples/table-http/table-http-example.css
View File

@ -1,19 +1,16 @@
/* Structure */
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
position: relative;
max-height: 500px;
}
.example-table-container {
position: relative;
max-height: 400px;
overflow: auto;
}
.example-header {
min-height: 64px;
display: flex;
align-items: center;
padding-left: 24px;
font-size: 20px;
table {
width: 100%;
}
.example-loading-shade {

18
src/assets/angular-material-examples/table-http/table-http-example.html
View File

@ -7,12 +7,10 @@
</div>
</div>
<table mat-table #table [dataSource]="dataSource" class="example-table"
<div class="example-table-container">
<table mat-table [dataSource]="data" class="example-table"
matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Number Column -->
<ng-container matColumnDef="number">
<th mat-header-cell *matHeaderCellDef>#</th>
@ -33,9 +31,7 @@
<!-- Created Column -->
<ng-container matColumnDef="created">
<th mat-header-cell *matHeaderCellDef
mat-sort-header
disableClear="true">
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear="true">
Created
</th>
<td mat-cell *matCellDef="let row">{{ row.created_at | date }}</td>
@ -44,7 +40,7 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [length]="resultsLength" [pageSize]="30">
</mat-paginator>
</div>
<mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>
</div>

12
src/assets/angular-material-examples/table-http/table-http-example.ts
View File

@ -1,6 +1,6 @@
import {HttpClient} from '@angular/common/http';
import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatSort} from '@angular/material';
import {merge, Observable, of as observableOf} from 'rxjs';
import {catchError, map, startWith, switchMap} from 'rxjs/operators';
@ -12,10 +12,10 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators';
styleUrls: ['table-http-example.css'],
templateUrl: 'table-http-example.html',
})
export class TableHttpExample implements AfterViewInit {
export class TableHttpExample implements OnInit {
displayedColumns = ['created', 'state', 'number', 'title'];
exampleDatabase: ExampleHttpDao | null;
dataSource = new MatTableDataSource();
data: GithubIssue[] = [];
resultsLength = 0;
isLoadingResults = true;
@ -26,7 +26,7 @@ export class TableHttpExample implements AfterViewInit {
constructor(private http: HttpClient) {}
ngAfterViewInit() {
ngOnInit() {
this.exampleDatabase = new ExampleHttpDao(this.http);
// If the user changes the sort order, reset back to the first page.
@ -54,7 +54,7 @@ export class TableHttpExample implements AfterViewInit {
this.isRateLimitReached = true;
return observableOf([]);
})
).subscribe(data => this.dataSource.data = data);
).subscribe(data => this.data = data);
}
}

19
src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.css Executable file
View File

@ -0,0 +1,19 @@
table {
width: 100%;
}
.example-first-header-row th {
border-bottom: none;
}
.example-second-header-row {
font-style: italic;
}
.example-first-footer-row {
font-weight: bold;
}
.example-second-footer-row td {
color: #900000;
}

45
src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.html Executable file
View File

@ -0,0 +1,45 @@
<table mat-table [dataSource]="transactions" class="mat-elevation-z8">
<!-- Item Column -->
<ng-container matColumnDef="item">
<th mat-header-cell *matHeaderCellDef> Item </th>
<td mat-cell *matCellDef="let transaction"> {{transaction.item}} </td>
<td mat-footer-cell *matFooterCellDef> Total </td>
</ng-container>
<!-- Cost Column -->
<ng-container matColumnDef="cost">
<th mat-header-cell *matHeaderCellDef> Cost </th>
<td mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </td>
<td mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </td>
</ng-container>
<!-- Item Description Column -->
<ng-container matColumnDef="item-description">
<th mat-header-cell *matHeaderCellDef> Name of the item purchased </th>
</ng-container>
<!-- Cost Description Column -->
<ng-container matColumnDef="cost-description">
<th mat-header-cell *matHeaderCellDef> Cost of the item in USD </th>
</ng-container>
<!-- Disclaimer column -->
<ng-container matColumnDef="disclaimer">
<td mat-footer-cell *matFooterCellDef colspan="2">
Please note that the cost of items displayed are completely and totally made up.
</td>
</ng-container>
<!-- The table will render two header rows, one data row per data object, and two footer rows. -->
<tr mat-header-row *matHeaderRowDef="displayedColumns"
class="example-first-header-row">
</tr>
<tr mat-header-row *matHeaderRowDef="['item-description', 'cost-description']"
class="example-second-header-row">
</tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns" class="example-first-footer-row"></tr>
<tr mat-footer-row *matFooterRowDef="['disclaimer']" class="example-second-footer-row"></tr>
</table>

32
src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts Executable file
View File

@ -0,0 +1,32 @@
import {Component} from '@angular/core';
import {Transaction} from '../table-footer-row/table-footer-row-example';
export interface Transaction {
item: string;
cost: number;
}
/**
* @title Table with multiple header and footer rows
*/
@Component({
selector: 'table-multiple-header-footer-example',
styleUrls: ['table-multiple-header-footer-example.css'],
templateUrl: 'table-multiple-header-footer-example.html',
})
export class TableMultipleHeaderFooterExample {
displayedColumns = ['item', 'cost'];
transactions: Transaction[] = [
{item: 'Beach ball', cost: 4},
{item: 'Towel', cost: 5},
{item: 'Frisbee', cost: 2},
{item: 'Sunscreen', cost: 4},
{item: 'Cooler', cost: 25},
{item: 'Swim suit', cost: 15},
];
/** Gets the total cost of all transactions. */
getTotalCost() {
return this.transactions.map(t => t.cost).reduce((acc, value) => acc + value, 0);
}
}

0
src/assets/angular-material-examples/table-native-only/table-native-only-example.css
View File

18
src/assets/angular-material-examples/table-native-only/table-native-only-example.html
View File

@ -1,18 +0,0 @@
<table class="mat-table">
<thead>
<tr class="mat-header-row">
<th class="mat-header-cell"> No. </th>
<th class="mat-header-cell"> Name </th>
<th class="mat-header-cell"> Weight </th>
<th class="mat-header-cell"> Symbol </th>
</tr>
</thead>
<tbody>
<tr class="mat-row" *ngFor="let element of elements">
<td class="mat-cell"> {{element.position}} </td>
<td class="mat-cell"> {{element.name}} </td>
<td class="mat-cell"> {{element.weight}} </td>
<td class="mat-cell"> {{element.symbol}} </td>
</tr>
</tbody>
</table>

19
src/assets/angular-material-examples/table-native-only/table-native-only-example.ts
View File

@ -1,19 +0,0 @@
import {Component} from '@angular/core';
/**
* @title Native `<table>` that only applies the Material styles
*/
@Component({
selector: 'table-native-only-example',
styleUrls: ['table-native-only-example.css'],
templateUrl: 'table-native-only-example.html',
})
export class TableNativeOnlyExample {
elements = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
];
}

16
src/assets/angular-material-examples/table-overview/table-overview-example.css
View File

@ -1,14 +1,5 @@
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
max-height: 500px;
overflow: auto;
}
.example-header {
min-height: 64px;
padding: 8px 24px 0;
table {
width: 100%;
}
.mat-form-field {
@ -16,3 +7,6 @@
width: 100%;
}
td, th {
width: 25%;
}

5
src/assets/angular-material-examples/table-overview/table-overview-example.html
View File

@ -1,11 +1,8 @@
<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<div class="example-container mat-elevation-z8">
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->

7
src/assets/angular-material-examples/table-overview/table-overview-example.ts
View File

@ -1,4 +1,4 @@
import {Component, ViewChild} from '@angular/core';
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
/**
@ -9,7 +9,7 @@ import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
styleUrls: ['table-overview-example.css'],
templateUrl: 'table-overview-example.html',
})
export class TableOverviewExample {
export class TableOverviewExample implements OnInit {
displayedColumns = ['id', 'name', 'progress', 'color'];
dataSource: MatTableDataSource<UserData>;
@ -34,6 +34,9 @@ export class TableOverviewExample {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}

9
src/assets/angular-material-examples/table-pagination/table-pagination-example.css
View File

@ -1,8 +1,3 @@
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
max-height: 500px;
overflow: auto;
table {
width: 100%;
}

10
src/assets/angular-material-examples/table-pagination/table-pagination-example.html
View File

@ -1,5 +1,5 @@
<div class="example-container mat-elevation-z8">
<table mat-table #table [dataSource]="dataSource">
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
@ -29,9 +29,5 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]"
[showFirstLastButtons]="true">
</mat-paginator>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

10
src/assets/angular-material-examples/table-pagination/table-pagination-example.ts
View File

@ -1,4 +1,4 @@
import {Component, ViewChild} from '@angular/core';
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';
/**
@ -9,9 +9,9 @@ import {MatPaginator, MatTableDataSource} from '@angular/material';
styleUrls: ['table-pagination-example.css'],
templateUrl: 'table-pagination-example.html',
})
export class TablePaginationExample {
export class TablePaginationExample implements OnInit {
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
@ -20,14 +20,14 @@ export class TablePaginationExample {
}
}
export interface Element {
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},

3
src/assets/angular-material-examples/table-row-context/table-row-context-example.css Executable file
View File

@ -0,0 +1,3 @@
table {
width: 100%;
}

46
src/assets/angular-material-examples/table-row-context/table-row-context-example.html Executable file
View File

@ -0,0 +1,46 @@
<table mat-table [dataSource]="data" class="mat-elevation-z8">
<!-- Index Column -->
<ng-container matColumnDef="$implicit">
<th mat-header-cell *matHeaderCellDef> $implicit </th>
<td mat-cell *matCellDef="let data"> {{data}} </td>
</ng-container>
<!-- Index Column -->
<ng-container matColumnDef="index">
<th mat-header-cell *matHeaderCellDef> index </th>
<td mat-cell *matCellDef="let index = index"> {{index}} </td>
</ng-container>
<!-- Index Column -->
<ng-container matColumnDef="count">
<th mat-header-cell *matHeaderCellDef> count </th>
<td mat-cell *matCellDef="let count = count"> {{count}} </td>
</ng-container>
<!-- Index Column -->
<ng-container matColumnDef="first">
<th mat-header-cell *matHeaderCellDef> first </th>
<td mat-cell *matCellDef="let first = first"> {{first}} </td>
</ng-container>
<!-- Index Column -->
<ng-container matColumnDef="last">
<th mat-header-cell *matHeaderCellDef> last </th>
<td mat-cell *matCellDef="let last = last"> {{last}} </td>
</ng-container>
<!-- Index Column -->
<ng-container matColumnDef="even">
<th mat-header-cell *matHeaderCellDef> even </th>
<td mat-cell *matCellDef="let even = even"> {{even}} </td>
</ng-container>
<!-- Index Column -->
<ng-container matColumnDef="odd">
<th mat-header-cell *matHeaderCellDef> odd </th>
<td mat-cell *matCellDef="let odd = odd"> {{odd}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

14
src/assets/angular-material-examples/table-row-context/table-row-context-example.ts Executable file
View File

@ -0,0 +1,14 @@
import {Component} from '@angular/core';
/**
* @title Table showing each row context properties.
*/
@Component({
selector: 'table-row-context-example',
styleUrls: ['table-row-context-example.css'],
templateUrl: 'table-row-context-example.html',
})
export class TableRowContextExample {
displayedColumns = ['$implicit', 'index', 'count', 'first', 'last', 'even', 'odd'];
data: string[] = ['one', 'two', 'three', 'four', 'five'];
}

12
src/assets/angular-material-examples/table-selection/table-selection-example.css
View File

@ -1,11 +1,3 @@
.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
overflow: auto;
}
.mat-column-select {
overflow: visible;
table {
width: 100%;
}

4
src/assets/angular-material-examples/table-selection/table-selection-example.html
View File

@ -1,5 +1,4 @@
<div class="example-container mat-elevation-z8">
<table mat-table #table [dataSource]="dataSource">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
@ -46,4 +45,3 @@
(click)="selection.toggle(row)">
</tr>
</table>
</div>

18
src/assets/angular-material-examples/table-selection/table-selection-example.ts
View File

@ -12,8 +12,8 @@ import {SelectionModel} from '@angular/cdk/collections';
})
export class TableSelectionExample {
displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
selection = new SelectionModel<Element>(true, []);
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
selection = new SelectionModel<PeriodicElement>(true, []);
/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
@ -30,14 +30,14 @@ export class TableSelectionExample {
}
}
export interface Element {
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
@ -48,14 +48,4 @@ const ELEMENT_DATA: Element[] = [
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
{position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
{position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
{position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
{position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
{position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
{position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
{position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
{position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

10
src/assets/angular-material-examples/table-sorting/table-sorting-example.css
View File

@ -1,11 +1,7 @@
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
overflow: auto;
max-height: 500px;
table {
width: 100%;
}
.mat-header-cell.mat-sort-header-sorted {
th.mat-sort-header-sorted {
color: black;
}

4
src/assets/angular-material-examples/table-sorting/table-sorting-example.html
View File

@ -1,5 +1,4 @@
<div class="example-container mat-elevation-z8">
<table mat-table #table [dataSource]="dataSource" matSort>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
@ -28,4 +27,3 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>

20
src/assets/angular-material-examples/table-sorting/table-sorting-example.ts
View File

@ -1,5 +1,5 @@
import {Component, ViewChild} from '@angular/core';
import {MatTableDataSource, MatSort} from '@angular/material';
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, MatTableDataSource} from '@angular/material';
/**
* @title Table with sorting
@ -9,7 +9,7 @@ import {MatTableDataSource, MatSort} from '@angular/material';
styleUrls: ['table-sorting-example.css'],
templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample {
export class TableSortingExample implements OnInit {
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ -20,14 +20,14 @@ export class TableSortingExample {
}
}
export interface Element {
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
@ -38,14 +38,4 @@ const ELEMENT_DATA: Element[] = [
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
{position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
{position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
{position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
{position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
{position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
{position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
{position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
{position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
{position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
{position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

26
src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.css Executable file
View File

@ -0,0 +1,26 @@
.example-container {
height: 400px;
width: 550px;
overflow: auto;
}
table {
width: 800px;
}
td.mat-column-star {
width: 20px;
padding-right: 8px;
}
th.mat-column-position, td.mat-column-position {
padding-left: 8px;
}
.mat-table-sticky:first-child {
border-right: 1px solid #e0e0e0;
}
.mat-table-sticky:last-child {
border-left: 1px solid #e0e0e0;
}

39
src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.html Executable file
View File

@ -0,0 +1,39 @@
<div class="example-container mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Name Column -->
<ng-container matColumnDef="name" sticky>
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<!-- Star Column -->
<ng-container matColumnDef="star" stickyEnd>
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<mat-icon>more_vert</mat-icon>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>

35
src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.ts Executable file
View File

@ -0,0 +1,35 @@
import {Component} from '@angular/core';
/**
* @title Table with a sticky columns
*/
@Component({
selector: 'table-sticky-columns-example',
styleUrls: ['table-sticky-columns-example.css'],
templateUrl: 'table-sticky-columns-example.html',
})
export class TableStickyColumnsExample {
displayedColumns =
['name', 'position', 'weight', 'symbol', 'position', 'weight', 'symbol', 'star'];
dataSource = ELEMENT_DATA;
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

28
src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.css Executable file
View File

@ -0,0 +1,28 @@
.example-container {
height: 400px;
overflow: auto;
}
.mat-table-sticky {
background: #59abfd;
opacity: 1;
}
.example-sticky-toggle-group {
margin: 8px;
}
.mat-column-filler {
padding: 0 8px;
font-size: 10px;
text-align: center;
}
.mat-header-cell, .mat-footer-cell, .mat-cell {
min-width: 80px;
box-sizing: border-box;
}
.mat-header-row, .mat-footer-row, .mat-row {
min-width: 1920px; /* 24 columns, 80px each */
}

Some files were not shown because too many files have changed in this diff Show More