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 existing Angular Material examples

Browse Source
This commit is contained in:
sercan 2019-05-30 11:44:28 +03:00
parent bb3764aaff
commit 226f3fb440
4 changed files with 0 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -171,7 +171,6 @@ import { StepperLabelPositionBottomExample } from 'assets/angular-material-examp
import { StepperStatesExample } from 'assets/angular-material-examples/stepper-states/stepper-states-example';
import { StepperErrorsExample } from 'assets/angular-material-examples/stepper-errors/stepper-errors-example';
import { TabGroupAlignExample } from 'assets/angular-material-examples/tab-group-align/tab-group-align-example';
import { SimpleColumn, TableSimpleColumnExample } from 'assets/angular-material-examples/table-simple-column/table-simple-column-example';
import { TableWrappedExample, WrapperTable } from 'assets/angular-material-examples/table-wrapped/table-wrapped-example';
import { PlainInputAutocompleteExample } from 'assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example';
import { ChipsDragDropExample } from 'assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example';
@ -385,7 +384,6 @@ export const COMPONENT_MAP = {
'table-pagination',
'table-row-context',
'table-selection',
'table-simple-column',
'table-sorting',
'table-sticky-columns',
'table-sticky-complex',
@ -1017,10 +1015,6 @@ export const EXAMPLE_COMPONENTS = {
title : 'Table with selection',
component: TableSelectionExample
},
'table-simple-column' : {
title : 'Table with a custom column component for easy column definition reuse',
component: TableSimpleColumnExample
},
'table-sorting' : {
title : 'Table with sorting',
component: TableSortingExample
@ -1317,7 +1311,6 @@ export const EXAMPLE_LIST = [
TablePaginationExample,
TableRowContextExample,
TableSelectionExample,
TableSimpleColumnExample, SimpleColumn,
TableSortingExample,
TableStickyColumnsExample,
TableStickyComplexExample,

3
src/assets/angular-material-examples/table-simple-column/table-simple-column-example.css
View File

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

15
src/assets/angular-material-examples/table-simple-column/table-simple-column-example.html
View File

@ -1,15 +0,0 @@
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"
matSort #sort="matSort">
<!-- Basic column: name is used for header label AND data property -->
<simple-column name="name" sortable></simple-column>
<simple-column name="position"></simple-column>
<!-- Name doesn't match the data property (or transform needed); define a custom data accessor -->
<simple-column name="weight" [dataAccessor]="getWeight"></simple-column>
<!-- Name doesn't match desired header text; define a custom label -->
<simple-column name="symbol" label="SYMBOL!"></simple-column>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let data; columns: displayedColumns;"></tr>
</table>

125
src/assets/angular-material-examples/table-simple-column/table-simple-column-example.ts
View File

@ -1,125 +0,0 @@
import {Component, Input, OnDestroy, OnInit, Optional, ViewChild} from '@angular/core';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import { MatSort, MatSortHeader } from '@angular/material/sort';
import { MatColumnDef, MatTable, MatTableDataSource } from '@angular/material/table';
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'},
];
/**
* @title Table with a custom column component for easy column definition reuse.
*/
@Component({
selector: 'table-simple-column-example',
styleUrls: ['table-simple-column-example.css'],
templateUrl: 'table-simple-column-example.html',
})
export class TableSimpleColumnExample implements OnInit {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
@ViewChild('sort', {static: true}) sort: MatSort;
getWeight = (data: PeriodicElement) => '~' + data.weight;
ngOnInit() {
this.dataSource.sort = this.sort;
}
}
/**
* Column that shows simply shows text content for the header and row
* cells. By default, the name of this column will be assumed to be both the header
* text and data property used to access the data value to show in cells. To override
* the header text, provide a label text. To override the data cell values,
* provide a dataAccessor function that provides the string to display for each row's cell.
*
* Note that this component sets itself as visually hidden since it will show up in the `mat-table`
* DOM because it is an empty element with an ng-container (nothing rendered). It should not
* interfere with screen readers.
*/
@Component({
selector: 'simple-column',
template: `
<ng-container matColumnDef>
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{label || name}} </th>
<td mat-cell *matCellDef="let data"> {{getData(data)}}</td>
</ng-container>
`,
host: {
'class': 'simple-column cdk-visually-hidden',
'[attr.ariaHidden]': 'true',
}
})
export class SimpleColumn<T> implements OnDestroy, OnInit {
/** Column name that should be used to reference this column. */
@Input()
get name(): string { return this._name; }
set name(name: string) {
this._name = name;
this.columnDef.name = name;
}
_name: string;
/**
* Text label that should be used for the column header. If this property is not
* set, the header text will default to the column name.
*/
@Input() label: string;
/**
* Accessor function to retrieve the data should be provided to the cell. If this
* property is not set, the data cells will assume that the column name is the same
* as the data property the cells should display.
*/
@Input() dataAccessor: ((data: T, name: string) => string);
/** Alignment of the cell values. */
@Input() align: 'before' | 'after' = 'before';
/** Whether the column is sortable */
@Input()
get sortable(): boolean { return this._sortable; }
set sortable(sortable: boolean) {
this._sortable = coerceBooleanProperty(sortable);
}
_sortable: boolean;
@ViewChild(MatColumnDef, {static: true}) columnDef: MatColumnDef;
@ViewChild(MatSortHeader, {static: true}) sortHeader: MatSortHeader;
constructor(@Optional() public table: MatTable<any>) { }
ngOnInit() {
if (this.table) {
this.table.addColumnDef(this.columnDef);
}
}
ngOnDestroy() {
if (this.table) {
this.table.removeColumnDef(this.columnDef);
}
}
getData(data: T): any {
return this.dataAccessor ? this.dataAccessor(data, this.name) : (data as any)[this.name];
}
}