purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-11-04 14:13:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Angular, Angular Material and Flex Layout to 6

Browse Source 
Updated additional project files
Updated Angular Material examples
This commit is contained in:
Sercan Yemen 2018-05-04 19:28:19 +03:00
parent 02df48ab4e
commit f4636d9a37
454 changed files with 13445 additions and 9629 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
.angular-cli.json
View File

@ -1,74 +0,0 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "fuse"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"app/main/content/components/angular-material",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"hmr": "environments/environment.hmr.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": [
"**/node_modules/**",
"**/src/app/fuse-fake-db/**/*",
"**/src/assets/angular-material-examples/**/*"
]
},
{
"project": "src/tsconfig.spec.json",
"exclude": [
"**/node_modules/**",
"**/src/app/fuse-fake-db/**/*",
"**/src/assets/angular-material-examples/**/*"
]
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**",
"**/src/app/fuse-fake-db/**/*",
"**/src/assets/angular-material-examples/**/*"
]
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}

1
.editorconfig
View File

@ -1,3 +1,4 @@
# Editor configuration, see http://editorconfig.org
root = true
[*]

5
.gitignore vendored
View File

@ -30,13 +30,10 @@
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
# e2e
/e2e/*.js
/e2e/*.map
# System Files
.DS_Store
Thumbs.db

12
README.md
View File

@ -1,6 +1,6 @@
# Fuse2
Material Design Admin Template with Angular 5+ and Angular Material 2
Material Design Admin Template with Angular 6+ and Angular Material 2
## The Community
@ -14,11 +14,11 @@ Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app w
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`.
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
## Running unit tests
@ -27,4 +27,8 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
Before running the tests make sure you are serving the app via `ng serve`.
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

140
angular.json Normal file
View File

@ -0,0 +1,140 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"fuse": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/fuse",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
"src/app/main/content/components/angular-material"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "fuse:build"
},
"configurations": {
"production": {
"browserTarget": "fuse:build:production"
},
"hmr": {
"hmr": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "fuse:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**",
"**/src/app/fuse-fake-db/**/*",
"**/src/assets/angular-material-examples/**/*"
]
}
}
}
},
"fuse-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "fuse:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**",
"**/src/app/fuse-fake-db/**/*",
"**/src/assets/angular-material-examples/**/*"
]
}
}
}
}
},
"defaultProject": "fuse"
}

31
e2e/protractor.conf.js Normal file
View File

@ -0,0 +1,31 @@
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const {SpecReporter} = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs : [
'./src/**/*.e2e-spec.ts'
],
capabilities : {
'browserName': 'chrome'
},
directConnect : true,
baseUrl : 'http://localhost:4200/',
framework : 'jasmine',
jasmineNodeOpts : {
showColors : true,
defaultTimeoutInterval: 30000,
print : function ()
{
}
},
onPrepare()
{
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.e2e.json')
});
jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
}
};

2
e2e/app.e2e-spec.ts → e2e/src/app.e2e-spec.ts
View File

@ -9,6 +9,6 @@ describe('Fuse2 App', () => {
it('should display welcome message', () => {
page.navigateTo();
expect(page.getParagraphText()).toEqual('Welcome to app!');
expect(page.getParagraphText()).toEqual('Welcome to Fuse2!');
});
});

0
e2e/app.po.ts → e2e/src/app.po.ts
View File

5
e2e/tsconfig.e2e.json
View File

@ -1,8 +1,7 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"outDir": "../out-tsc/app",
"module": "commonjs",
"target": "es5",
"types": [
@ -11,4 +10,4 @@
"node"
]
}
}
}

33
karma.conf.js
View File

@ -1,33 +0,0 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};

11443
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

86
package.json
View File

@ -1,11 +1,11 @@
{
"name": "fuse",
"version": "5.2.10",
"version": "6.0.0",
"license": "https://themeforest.net/licenses/terms/regular",
"scripts": {
"ng": "ng",
"start": "ng serve --open",
"start-hmr": "ng serve --hmr -e=hmr -sm=false",
"start-hmr": "ng serve --configuration hmr -sm=false",
"start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
"build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
"build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
@ -19,69 +19,71 @@
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.2",
"@angular/animations": "5.2.8",
"@angular/cdk": "5.2.4",
"@angular/common": "5.2.8",
"@angular/compiler": "5.2.8",
"@angular/core": "5.2.8",
"@angular/flex-layout": "5.0.0-beta.14",
"@angular/forms": "5.2.8",
"@angular/http": "5.2.8",
"@angular/material": "5.2.4",
"@angular/material-moment-adapter": "5.2.4",
"@angular/platform-browser": "5.2.8",
"@angular/platform-browser-dynamic": "5.2.8",
"@angular/router": "5.2.8",
"@angular/animations": "6.0.0",
"@angular/cdk": "6.0.0",
"@angular/common": "6.0.0",
"@angular/compiler": "6.0.0",
"@angular/core": "6.0.0",
"@angular/flex-layout": "6.0.0-beta.15",
"@angular/forms": "6.0.0",
"@angular/http": "6.0.0",
"@angular/material": "6.0.0",
"@angular/material-moment-adapter": "6.0.0",
"@angular/platform-browser": "6.0.0",
"@angular/platform-browser-dynamic": "6.0.0",
"@angular/router": "6.0.0",
"@ngrx/effects": "5.2.0",
"@ngrx/router-store": "5.2.0",
"@ngrx/store": "5.2.0",
"@ngrx/store-devtools": "5.2.0",
"@ngx-translate/core": "9.1.1",
"@swimlane/ngx-charts": "7.1.1",
"@swimlane/ngx-datatable": "11.2.0",
"@swimlane/ngx-dnd": "3.1.0",
"@ngx-translate/core": "10.0.1",
"@swimlane/ngx-charts": "7.3.0",
"@swimlane/ngx-datatable": "11.3.2",
"@swimlane/ngx-dnd": "3.2.0",
"@types/prismjs": "1.9.0",
"angular-calendar": "0.23.6",
"angular-in-memory-web-api": "0.5.3",
"angular-calendar": "0.24.0",
"angular-in-memory-web-api": "0.6.0",
"chart.js": "2.7.2",
"classlist.js": "1.1.20150312",
"core-js": "2.5.3",
"d3": "4.13.0",
"core-js": "2.5.5",
"d3": "5.1.0",
"hammerjs": "2.0.8",
"intl": "1.2.5",
"lodash": "4.17.5",
"moment": "2.21.0",
"lodash": "4.17.10",
"moment": "2.22.1",
"ng2-charts": "1.6.0",
"ngrx-store-freeze": "0.2.1",
"ngx-color-picker": "5.3.4",
"ngrx-store-freeze": "0.2.2",
"ngx-color-picker": "5.3.8",
"ngx-cookie-service": "1.0.10",
"perfect-scrollbar": "1.3.0",
"prismjs": "1.11.0",
"rxjs": "5.5.6",
"prismjs": "1.14.0",
"rxjs": "6.1.0",
"rxjs-compat": "6.1.0",
"web-animations-js": "2.3.1",
"zone.js": "0.8.20"
"zone.js": "0.8.26"
},
"devDependencies": {
"@angular/cli": "1.7.3",
"@angular/compiler-cli": "5.2.8",
"@angular/language-service": "5.2.8",
"@angular/cli": "6.0.0",
"@angular/compiler-cli": "6.0.0",
"@angular/language-service": "6.0.0",
"@angular-devkit/build-angular": "0.6.0",
"@angularclass/hmr": "2.1.3",
"@types/jasmine": "2.8.6",
"@types/jasmine": "2.8.7",
"@types/jasminewd2": "2.0.3",
"@types/lodash": "4.14.106",
"@types/node": "6.0.101",
"@types/lodash": "4.14.108",
"@types/node": "8.9.5",
"codelyzer": "4.2.1",
"jasmine-core": "2.8.0",
"jasmine-core": "2.99.1",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.0",
"karma": "1.7.1",
"karma-chrome-launcher": "2.2.0",
"karma-coverage-istanbul-reporter": "1.4.2",
"karma-jasmine": "1.1.1",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.1.2",
"ts-node": "4.1.0",
"protractor": "5.3.1",
"ts-node": "5.0.1",
"tslint": "5.9.1",
"typescript": "2.6.2",
"typescript": "2.7.2",
"webpack-bundle-analyzer": "2.11.1"
}
}

28
protractor.conf.js
View File

@ -1,28 +0,0 @@
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};

1
src/@fuse/components/highlight/prism-languages.ts
View File

@ -5,6 +5,7 @@ import 'prismjs/components/prism-csharp';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-diff';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-markup-templating';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-json';

1233
src/app/main/content/components/angular-material/example-components.ts
View File

File diff suppressed because it is too large Load Diff

74
src/app/main/content/components/angular-material/material.module.ts
View File

@ -1,43 +1,25 @@
import { NgModule } from '@angular/core';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCheckboxModule,
MatToolbarModule,
MatTooltipModule,
MatCardModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatStepperModule
} from '@angular/material';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import {
MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule,
MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule,
MatDialogModule, MatDividerModule, MatExpansionModule, MatFormFieldModule, MatGridListModule,
MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatPaginatorModule,
MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule,
MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule,
MatStepperModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatTreeModule
} from '@angular/material';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
@NgModule({
imports: [
CdkTableModule,
CdkTreeModule,
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
@ -45,6 +27,7 @@ import { CdkTableModule } from '@angular/cdk/table';
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
@ -52,7 +35,7 @@ import { CdkTableModule } from '@angular/cdk/table';
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatMomentDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
@ -60,19 +43,23 @@ import { CdkTableModule } from '@angular/cdk/table';
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSliderModule,
MatSnackBarModule,
MatStepperModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
CdkTableModule
MatTreeModule
],
exports: [
CdkTableModule,
CdkTreeModule,
MatAutocompleteModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
@ -80,13 +67,15 @@ import { CdkTableModule } from '@angular/cdk/table';
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatMomentDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
@ -94,19 +83,18 @@ import { CdkTableModule } from '@angular/cdk/table';
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSliderModule,
MatSnackBarModule,
MatStepperModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
CdkTableModule
MatTreeModule
]
})
export class MaterialModule
{
}

78
src/app/navigation/navigation.ts
View File

@ -668,16 +668,16 @@ export const navigation = [
'type' : 'group',
'children': [
{
'id' : 'list',
'title': 'List',
'id' : 'badge',
'title': 'Badge',
'type' : 'item',
'url' : '/components/angular-material/list'
'url' : '/components/angular-material/badge'
},
{
'id' : 'grid-list',
'title': 'Grid list',
'id' : 'bottom-sheet',
'title': 'Bottom Sheet',
'type' : 'item',
'url' : '/components/angular-material/grid-list'
'url' : '/components/angular-material/bottom-sheet'
},
{
'id' : 'card',
@ -691,18 +691,6 @@ export const navigation = [
'type' : 'item',
'url' : '/components/angular-material/divider'
},
{
'id' : 'stepper',
'title': 'Stepper',
'type' : 'item',
'url' : '/components/angular-material/stepper'
},
{
'id' : 'tabs',
'title': 'Tabs',
'type' : 'item',
'url' : '/components/angular-material/tabs'
},
{
'id' : 'elevation',
'title': 'Elevation',
@ -714,6 +702,30 @@ export const navigation = [
'title': 'Expansion Panel',
'type' : 'item',
'url' : '/components/angular-material/expansion-panel'
},
{
'id' : 'grid-list',
'title': 'Grid list',
'type' : 'item',
'url' : '/components/angular-material/grid-list'
},
{
'id' : 'list',
'title': 'List',
'type' : 'item',
'url' : '/components/angular-material/list'
},
{
'id' : 'stepper',
'title': 'Stepper',
'type' : 'item',
'url' : '/components/angular-material/stepper'
},
{
'id' : 'tabs',
'title': 'Tabs',
'type' : 'item',
'url' : '/components/angular-material/tabs'
}
]
},
@ -771,17 +783,17 @@ export const navigation = [
'type' : 'item',
'url' : '/components/angular-material/dialog'
},
{
'id' : 'tooltip',
'title': 'Tooltip',
'type' : 'item',
'url' : '/components/angular-material/tooltip'
},
{
'id' : 'snackbar',
'title': 'Snackbar',
'type' : 'item',
'url' : '/components/angular-material/snackbar'
},
{
'id' : 'tooltip',
'title': 'Tooltip',
'type' : 'item',
'url' : '/components/angular-material/tooltip'
}
]
},
@ -791,10 +803,10 @@ export const navigation = [
'type' : 'group',
'children': [
{
'id' : 'table',
'title': 'Table',
'id' : 'paginator',
'title': 'Paginator',
'type' : 'item',
'url' : '/components/angular-material/data-table'
'url' : '/components/angular-material/paginator'
},
{
'id' : 'sort-header',
@ -803,12 +815,18 @@ export const navigation = [
'url' : '/components/angular-material/sort-header'
},
{
'id' : 'paginator',
'title': 'Paginator',
'id' : 'table',
'title': 'Table',
'type' : 'item',
'url' : '/components/angular-material/paginator'
'url' : '/components/angular-material/table'
}
]
},
{
'id' : 'tree',
'title': 'Tree',
'type' : 'item',
'url' : '/components/angular-material/tree'
}
]
},

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

@ -1,8 +1,7 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import {startWith} from 'rxjs/operators/startWith';
import {map} from 'rxjs/operators/map';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
/**
* @title Highlight the first autocomplete option

8
src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css Normal file → Executable file
View File

@ -1,9 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
width: 100%;
}

16
src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html Normal file → Executable file
View File

@ -1,10 +1,10 @@
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="example-full-width">
<input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>

73
src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts Normal file → Executable file
View File

@ -1,57 +1,48 @@
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
export class User
{
constructor(public name: string)
{
}
export class User {
constructor(public name: string) { }
}
/**
* @title Display value autocomplete
*/
@Component({
selector : 'autocomplete-display-example',
templateUrl: 'autocomplete-display-example.html',
styleUrls : ['autocomplete-display-example.css']
selector: 'autocomplete-display-example',
templateUrl: 'autocomplete-display-example.html',
styleUrls: ['autocomplete-display-example.css']
})
export class AutocompleteDisplayExample
{
export class AutocompleteDisplayExample {
myControl = new FormControl();
myControl = new FormControl();
options = [
new User('Mary'),
new User('Shelley'),
new User('Igor')
];
options = [
new User('Mary'),
new User('Shelley'),
new User('Igor')
];
filteredOptions: Observable<User[]>;
filteredOptions: Observable<User[]>;
ngOnInit()
{
this.filteredOptions = this.myControl.valueChanges
.startWith(null)
.map(user => user && typeof user === 'object' ? user.name : user)
.map(name => name ? this.filter(name) : this.options.slice());
}
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith<string | User>(''),
map(value => typeof value === 'string' ? value : value.name),
map(name => name ? this.filter(name) : this.options.slice())
);
}
filter(name: string): User[]
{
return this.options.filter(option =>
option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
filter(name: string): User[] {
return this.options.filter(option =>
option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
displayFn(user: User): string
{
if ( user )
{
return user.name;
}
}
displayFn(user?: User): string | undefined {
return user ? user.name : undefined;
}
}

8
src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css Normal file → Executable file
View File

@ -1,9 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
width: 100%;
}

16
src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html Normal file → Executable file
View File

@ -1,10 +1,10 @@
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>

54
src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts Normal file → Executable file
View File

@ -1,41 +1,39 @@
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
/**
* @title Filter autocomplete
*/
@Component({
selector : 'autocomplete-filter-example',
templateUrl: 'autocomplete-filter-example.html',
styleUrls : ['autocomplete-filter-example.css']
selector: 'autocomplete-filter-example',
templateUrl: 'autocomplete-filter-example.html',
styleUrls: ['autocomplete-filter-example.css']
})
export class AutocompleteFilterExample
{
export class AutocompleteFilterExample {
myControl: FormControl = new FormControl();
myControl: FormControl = new FormControl();
options = [
'One',
'Two',
'Three'
];
options = [
'One',
'Two',
'Three'
];
filteredOptions: Observable<string[]>;
filteredOptions: Observable<string[]>;
ngOnInit()
{
this.filteredOptions = this.myControl.valueChanges
.startWith(null)
.map(val => val ? this.filter(val) : this.options.slice());
}
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(val => this.filter(val))
);
}
filter(val: string): string[]
{
return this.options.filter(option =>
option.toLowerCase().indexOf(val.toLowerCase()) === 0);
}
filter(val: string): string[] {
return this.options.filter(option =>
option.toLowerCase().includes(val.toLowerCase()));
}
}

0
src/assets/angular-material-examples/icon-svg-example/icon-svg-example.css → src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.css
View File

12
src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html Executable file
View File

@ -0,0 +1,12 @@
<form [formGroup]="stateForm">
<mat-form-field>
<input type="text" matInput placeholder="States Group" formControlName="stateGroup" required [matAutocomplete]="autoGroup"/>
<mat-autocomplete #autoGroup="matAutocomplete">
<mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
<mat-option *ngFor="let name of group.names" [value]="name">
{{ name }}
</mat-option>
</mat-optgroup>
</mat-autocomplete>
</mat-form-field>
</form>

111
src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts Executable file
View File

@ -0,0 +1,111 @@
import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder} from '@angular/forms';
import {Observable} from 'rxjs';
import {startWith, map} from 'rxjs/operators';
export interface StateGroup {
letter: string;
names: string[];
}
/**
* @title Option groups autocomplete
*/
@Component({
templateUrl: './autocomplete-optgroup-example.html',
styleUrls: ['./autocomplete-optgroup-example.css'],
})
export class AutocompleteOptgroupExample implements OnInit {
stateForm: FormGroup = this.fb.group({
stateGroup: '',
});
stateGroups: StateGroup[] = [{
letter: 'A',
names: ['Alabama', 'Alaska', 'Arizona', 'Arkansas']
}, {
letter: 'C',
names: ['California', 'Colorado', 'Connecticut']
}, {
letter: 'D',
names: ['Delaware']
}, {
letter: 'F',
names: ['Florida']
}, {
letter: 'G',
names: ['Georgia']
}, {
letter: 'H',
names: ['Hawaii']
}, {
letter: 'I',
names: ['Idaho', 'Illinois', 'Indiana', 'Iowa']
}, {
letter: 'K',
names: ['Kansas', 'Kentucky']
}, {
letter: 'L',
names: ['Louisiana']
}, {
letter: 'M',
names: ['Maine', 'Maryland', 'Massachusetts', 'Michigan',
'Minnesota', 'Mississippi', 'Missouri', 'Montana']
}, {
letter: 'N',
names: ['Nebraska', 'Nevada', 'New Hampshire', 'New Jersey',
'New Mexico', 'New York', 'North Carolina', 'North Dakota']
}, {
letter: 'O',
names: ['Ohio', 'Oklahoma', 'Oregon']
}, {
letter: 'P',
names: ['Pennsylvania']
}, {
letter: 'R',
names: ['Rhode Island']
}, {
letter: 'S',
names: ['South Carolina', 'South Dakota']
}, {
letter: 'T',
names: ['Tennessee', 'Texas']
}, {
letter: 'U',
names: ['Utah']
}, {
letter: 'V',
names: ['Vermont', 'Virginia']
}, {
letter: 'W',
names: ['Washington', 'West Virginia', 'Wisconsin', 'Wyoming']
}];
stateGroupOptions: Observable<StateGroup[]>;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges
.pipe(
startWith(''),
map(val => this.filterGroup(val))
);
}
filterGroup(val: string): StateGroup[] {
if (val) {
return this.stateGroups
.map(group => ({ letter: group.letter, names: this._filter(group.names, val) }))
.filter(group => group.names.length > 0);
}
return this.stateGroups;
}
private _filter(opt: string[], val: string) {
const filterValue = val.toLowerCase();
return opt.filter(item => item.toLowerCase().startsWith(filterValue));
}
}

8
src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css Normal file → Executable file
View File

@ -1,9 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
width: 100%;
}

33
src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html Normal file → Executable file
View File

@ -1,21 +1,20 @@
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" width="25"/>
<span>{{ state.name }}</span>
|
<small>Population: {{state.population}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="example-full-width">
<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
<span>{{ state.name }}</span> |
<small>Population: {{state.population}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
<br/>
<br />
<mat-slide-toggle
[checked]="stateCtrl.disabled"
(change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
Disable Input?
</mat-slide-toggle>
<mat-slide-toggle
[checked]="stateCtrl.disabled"
(change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
Disable Input?
</mat-slide-toggle>
</form>

100
src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts Normal file → Executable file
View File

@ -1,62 +1,64 @@
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
export class State {
constructor(public name: string, public population: string, public flag: string) { }
}
/**
* @title Autocomplete overview
*/
@Component({
selector : 'autocomplete-overview-example',
templateUrl: 'autocomplete-overview-example.html',
styleUrls : ['autocomplete-overview-example.css']
selector: 'autocomplete-overview-example',
templateUrl: 'autocomplete-overview-example.html',
styleUrls: ['autocomplete-overview-example.css']
})
export class AutocompleteOverviewExample
{
stateCtrl: FormControl;
filteredStates: Observable<any[]>;
export class AutocompleteOverviewExample {
stateCtrl: FormControl;
filteredStates: Observable<any[]>;
states: any[] = [
{
name : 'Arkansas',
population: '2.978M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
flag : 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
},
{
name : 'California',
population: '39.14M',
// https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
flag : 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
},
{
name : 'Florida',
population: '20.27M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
flag : 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
},
{
name : 'Texas',
population: '27.47M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
flag : 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
}
];
constructor()
states: State[] = [
{
this.stateCtrl = new FormControl();
this.filteredStates = this.stateCtrl.valueChanges
.startWith(null)
.map(state => state ? this.filterStates(state) : this.states.slice());
}
filterStates(name: string)
name: 'Arkansas',
population: '2.978M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
},
{
return this.states.filter(state =>
state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
name: 'California',
population: '39.14M',
// https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
},
{
name: 'Florida',
population: '20.27M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg'
},
{
name: 'Texas',
population: '27.47M',
// https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg'
}
];
constructor() {
this.stateCtrl = new FormControl();
this.filteredStates = this.stateCtrl.valueChanges
.pipe(
startWith(''),
map(state => state ? this.filterStates(state) : this.states.slice())
);
}
filterStates(name: string) {
return this.states.filter(state =>
state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
}

8
src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css Normal file → Executable file
View File

@ -1,9 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
width: 100%;
}

16
src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html Normal file → Executable file
View File

@ -1,10 +1,10 @@
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>

25
src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts Normal file → Executable file
View File

@ -1,23 +1,22 @@
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
/**
* @title Simple autocomplete
*/
@Component({
selector : 'autocomplete-simple-example',
templateUrl: 'autocomplete-simple-example.html',
styleUrls : ['autocomplete-simple-example.css']
selector: 'autocomplete-simple-example',
templateUrl: 'autocomplete-simple-example.html',
styleUrls: ['autocomplete-simple-example.css']
})
export class AutocompleteSimpleExample
{
export class AutocompleteSimpleExample {
myControl: FormControl = new FormControl();
myControl: FormControl = new FormControl();
options = [
'One',
'Two',
'Three'
];
options = [
'One',
'Two',
'Three'
];
}

0
src/assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example.css → src/assets/angular-material-examples/badge-overview/badge-overview-example.css Normal file → Executable file
View File

17
src/assets/angular-material-examples/badge-overview/badge-overview-example.html Executable file
View File

@ -0,0 +1,17 @@
<p>
<span matBadge="4" matBadgeOverlap="false">Text with a badge</span>
</p>
<p>
Button with a badge on the left
<button mat-raised-button color="primary"
matBadge="8" matBadgePosition="before" matBadgeColor="accent">
Action
</button>
</p>
<p>
Icon with a badge
<mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
</p>

12
src/assets/angular-material-examples/badge-overview/badge-overview-example.ts Executable file
View File

@ -0,0 +1,12 @@
import {Component} from '@angular/core';
/**
* @title Badge overview
*/
@Component({
selector: 'badge-overview-example',
templateUrl: 'badge-overview-example.html',
styleUrls: ['badge-overview-example.css']
})
export class BadgeOverviewExample { }

21
src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example-sheet.html Executable file
View File

@ -0,0 +1,21 @@
<mat-nav-list>
<a href="https://keep.google.com/" mat-list-item (click)="openLink($event)">
<span mat-line>Google Keep</span>
<span mat-line>Add to a note</span>
</a>
<a href="https://docs.google.com/" mat-list-item (click)="openLink($event)">
<span mat-line>Google Docs</span>
<span mat-line>Embed in a document</span>
</a>
<a href="https://plus.google.com/" mat-list-item (click)="openLink($event)">
<span mat-line>Google Plus</span>
<span mat-line>Share with your friends</span>
</a>
<a href="https://hangouts.google.com/" mat-list-item (click)="openLink($event)">
<span mat-line>Google Hangouts</span>
<span mat-line>Show to your coworkers</span>
</a>
</mat-nav-list>

1
src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.css Executable file
View File

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

3
src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.html Executable file
View File

@ -0,0 +1,3 @@
<p>You have receive a file called "cat-picture.jpeg".</p>
<button mat-raised-button (click)="openBottomSheet()">Open file</button>

31
src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.ts Executable file
View File

@ -0,0 +1,31 @@
import {Component} from '@angular/core';
import {MatBottomSheet, MatBottomSheetRef} from '@angular/material';
/**
* @title Bottom Sheet Overview
*/
@Component({
selector: 'bottom-sheet-overview-example',
templateUrl: 'bottom-sheet-overview-example.html',
styleUrls: ['bottom-sheet-overview-example.css'],
})
export class BottomSheetOverviewExample {
constructor(private bottomSheet: MatBottomSheet) {}
openBottomSheet(): void {
this.bottomSheet.open(BottomSheetOverviewExampleSheet);
}
}
@Component({
selector: 'bottom-sheet-overview-example-sheet',
templateUrl: 'bottom-sheet-overview-example-sheet.html',
})
export class BottomSheetOverviewExampleSheet {
constructor(private bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}
openLink(event: MouseEvent): void {
this.bottomSheetRef.dismiss();
event.preventDefault();
}
}

0
src/assets/angular-material-examples/button-overview/button-overview-example.css Normal file → Executable file
View File

0
src/assets/angular-material-examples/button-overview/button-overview-example.html Normal file → Executable file
View File

11
src/assets/angular-material-examples/button-overview/button-overview-example.ts Normal file → Executable file
View File

@ -1,12 +1,11 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';
/**
* @title Basic buttons
*/
@Component({
selector : 'button-overview-example',
templateUrl: 'button-overview-example.html'
selector: 'button-overview-example',
templateUrl: 'button-overview-example.html',
styleUrls: ['button-overview-example.css'],
})
export class ButtonOverviewExample
{
}
export class ButtonOverviewExample {}

2
src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.css Normal file → Executable file
View File

@ -1,3 +1,3 @@
.example-selected-value {
margin: 15px 0;
margin: 15px 0;
}

24
src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html Normal file → Executable file
View File

@ -1,15 +1,15 @@
<mat-button-toggle-group #group="matButtonToggleGroup">
<mat-button-toggle value="left">
<mat-icon>format_align_left</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="center">
<mat-icon>format_align_center</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="right">
<mat-icon>format_align_right</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="justify" disabled>
<mat-icon>format_align_justify</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="left">
<mat-icon>format_align_left</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="center">
<mat-icon>format_align_center</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="right">
<mat-icon>format_align_right</mat-icon>
</mat-button-toggle>
<mat-button-toggle value="justify" disabled>
<mat-icon>format_align_justify</mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
<div class="example-selected-value">Selected value: {{group.value}}</div>

12
src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts Normal file → Executable file
View File

@ -1,13 +1,11 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';
/**
* @title Exclusive selection
*/
@Component({
selector : 'button-toggle-exclusive-example',
templateUrl: 'button-toggle-exclusive-example.html',
styleUrls : ['button-toggle-exclusive-example.css']
selector: 'button-toggle-exclusive-example',
templateUrl: 'button-toggle-exclusive-example.html',
styleUrls: ['button-toggle-exclusive-example.css'],
})
export class ButtonToggleExclusiveExample
{
}
export class ButtonToggleExclusiveExample {}

0
src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.css Normal file → Executable file
View File

6
src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.html Normal file → Executable file
View File

@ -1 +1,5 @@
<mat-button-toggle>Toggle me!</mat-button-toggle>
<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold">Bold</mat-button-toggle>
<mat-button-toggle value="italic">Italic</mat-button-toggle>
<mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>

11
src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.ts Normal file → Executable file
View File

@ -1,12 +1,11 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';
/**
* @title Basic button-toggles
*/
@Component({
selector : 'button-toggle-overview-example',
templateUrl: 'button-toggle-overview-example.html'
selector: 'button-toggle-overview-example',
templateUrl: 'button-toggle-overview-example.html',
styleUrls: ['button-toggle-overview-example.css'],
})
export class ButtonToggleOverviewExample
{
}
export class ButtonToggleOverviewExample {}

6
src/assets/angular-material-examples/button-types/button-types-example.css Normal file → Executable file
View File

@ -1,5 +1,5 @@
.example-button-row {
display: flex;
align-items: center;
justify-content: space-around;
display: flex;
align-items: center;
justify-content: space-around;
}

90
src/assets/angular-material-examples/button-types/button-types-example.html Normal file → Executable file
View File

@ -1,64 +1,64 @@
<h3>Basic Buttons</h3>
<div class="button-row">
<button mat-button>Basic</button>
<button mat-button color="primary">Primary</button>
<button mat-button color="accent">Accent</button>
<button mat-button color="warn">Warn</button>
<button mat-button disabled>Disabled</button>
<a mat-button routerLink=".">Link</a>
<button mat-button>Basic</button>
<button mat-button color="primary">Primary</button>
<button mat-button color="accent">Accent</button>
<button mat-button color="warn">Warn</button>
<button mat-button disabled>Disabled</button>
<a mat-button routerLink=".">Link</a>
</div>
<h3>Raised Buttons</h3>
<div class="button-row">
<button mat-raised-button>Basic</button>
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
<button mat-raised-button disabled>Disabled</button>
<a mat-raised-button routerLink=".">Link</a>
<button mat-raised-button>Basic</button>
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
<button mat-raised-button disabled>Disabled</button>
<a mat-raised-button routerLink=".">Link</a>
</div>
<h3>Icon Buttons</h3>
<div class="button-row">
<button mat-icon-button>
<mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-icon-button color="primary">
<mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-icon-button color="accent">
<mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-icon-button color="warn">
<mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-icon-button disabled>
<mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-icon-button color="primary">
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-icon-button color="accent">
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-icon-button color="warn">
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<button mat-icon-button disabled>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
</div>
<h3>Fab Buttons</h3>
<div class="button-row">
<button mat-fab>Basic</button>
<button mat-fab color="primary">Primary</button>
<button mat-fab color="accent">Accent</button>
<button mat-fab color="warn">Warn</button>
<button mat-fab disabled>Disabled</button>
<button mat-fab>
<mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<a mat-fab routerLink=".">Link</a>
<button mat-fab>Basic</button>
<button mat-fab color="primary">Primary</button>
<button mat-fab color="accent">Accent</button>
<button mat-fab color="warn">Warn</button>
<button mat-fab disabled>Disabled</button>
<button mat-fab>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<a mat-fab routerLink=".">Link</a>
</div>
<h3>Mini Fab Buttons</h3>
<div class="button-row">
<button mat-mini-fab>Basic</button>
<button mat-mini-fab color="primary">Primary</button>
<button mat-mini-fab color="accent">Accent</button>
<button mat-mini-fab color="warn">Warn</button>
<button mat-mini-fab disabled>Disabled</button>
<button mat-mini-fab>
<mat-icon class="mat-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<a mat-mini-fab routerLink=".">Link</a>
<button mat-mini-fab>Basic</button>
<button mat-mini-fab color="primary">Primary</button>
<button mat-mini-fab color="accent">Accent</button>
<button mat-mini-fab color="warn">Warn</button>
<button mat-mini-fab disabled>Disabled</button>
<button mat-mini-fab>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
<a mat-mini-fab routerLink=".">Link</a>
</div>

12
src/assets/angular-material-examples/button-types/button-types-example.ts Normal file → Executable file
View File

@ -1,13 +1,11 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';
/**
* @title Button varieties
*/
@Component({
selector : 'button-types-example',
templateUrl: 'button-types-example.html',
styleUrls : ['button-types-example.css']
selector: 'button-types-example',
templateUrl: 'button-types-example.html',
styleUrls: ['button-types-example.css'],
})
export class ButtonTypesExample
{
}
export class ButtonTypesExample {}

6
src/assets/angular-material-examples/card-fancy/card-fancy-example.css Normal file → Executable file
View File

@ -1,8 +1,8 @@
.example-card {
width: 400px;
max-width: 400px;
}
.example-header-image {
background-image: url('/assets/images/examples/shiba1.jpg');
background-size: cover;
background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
background-size: cover;
}

34
src/assets/angular-material-examples/card-fancy/card-fancy-example.html Normal file → Executable file
View File

@ -1,19 +1,19 @@
<mat-card class="example-card">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="assets/images/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>

12
src/assets/angular-material-examples/card-fancy/card-fancy-example.ts Normal file → Executable file
View File

@ -1,13 +1,11 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';
/**
* @title Card with multiple sections
*/
@Component({
selector : 'card-fancy-example',
templateUrl: 'card-fancy-example.html',
styleUrls : ['card-fancy-example.css']
selector: 'card-fancy-example',
templateUrl: 'card-fancy-example.html',
styleUrls: ['card-fancy-example.css'],
})
export class CardFancyExample
{
}
export class CardFancyExample {}

0
src/assets/angular-material-examples/card-overview/card-overview-example.css Normal file → Executable file
View File

0
src/assets/angular-material-examples/card-overview/card-overview-example.html Normal file → Executable file
View File

11
src/assets/angular-material-examples/card-overview/card-overview-example.ts Normal file → Executable file
View File

@ -1,12 +1,11 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';
/**
* @title Basic cards
*/
@Component({
selector : 'card-overview-example',
templateUrl: 'card-overview-example.html'
selector: 'card-overview-example',
templateUrl: 'card-overview-example.html',
styleUrls: ['card-overview-example.css'],
})
export class CardOverviewExample
{
}
export class CardOverviewExample {}

34
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css Normal file → Executable file
View File

@ -1,8 +1,8 @@
/* Structure */
.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
display: flex;
flex-direction: column;
min-width: 300px;
}
/*
@ -10,30 +10,30 @@
* https://material.io/guidelines/components/data-tables.html
*/
.example-table {
flex: 1 1 auto;
overflow: auto;
max-height: 500px;
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;
display: flex;
border-bottom: 1px solid #ccc;
align-items: center;
height: 32px;
padding: 0 8px;
}
.example-cell, .example-header-cell {
flex: 1;
flex: 1;
}
.example-header-cell {
font-size: 12px;
font-weight: bold;
color: rgba(0, 0, 0, 0.54);
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);
font-size: 13px;
color: rgba(0, 0, 0, 0.87);
}

58
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html Normal file → Executable file
View File

@ -1,36 +1,36 @@
<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" -->
<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>
<!-- 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>
</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>
</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>
<!-- 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>
<!-- 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>
</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>
</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>
<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>

143
src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts Normal file → Executable file
View File

@ -1,92 +1,70 @@
import { Component } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import {DataSource} from '@angular/cdk/collections';
import {Component} from '@angular/core';
import {BehaviorSubject, Observable} from 'rxjs';
/**
* @title Basic CDK data-table
*/
@Component({
selector : 'cdk-table-basic-example',
styleUrls : ['cdk-table-basic-example.css'],
templateUrl: 'cdk-table-basic-example.html'
selector: 'cdk-table-basic-example',
styleUrls: ['cdk-table-basic-example.css'],
templateUrl: 'cdk-table-basic-example.html',
})
export class CdkTableBasicExample
{
displayedColumns = ['userId', 'userName', 'progress', 'color'];
exampleDatabase = new ExampleDatabase();
dataSource: ExampleDataSource | null;
export class CdkTableBasicExample {
displayedColumns = ['userId', 'userName', 'progress', 'color'];
exampleDatabase = new ExampleDatabase();
dataSource: ExampleDataSource | null;
ngOnInit()
{
this.dataSource = new ExampleDataSource(this.exampleDatabase);
}
ngOnInit() {
this.dataSource = new ExampleDataSource(this.exampleDatabase);
}
}
/** 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'
];
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;
name: string;
progress: string;
color: string;
export interface UserData {
id: string;
name: string;
progress: string;
color: 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[]>([]);
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; }
get data(): UserData[]
{
return this.dataChange.value;
}
constructor() {
// Fill up the database with 100 users.
for (let i = 0; i < 100; i++) { this.addUser(); }
}
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);
}
/** 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) + '.';
/** 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))]
};
}
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))]
};
}
}
/**
@ -96,20 +74,15 @@ 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<any> {
constructor(private _exampleDatabase: ExampleDatabase) {
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<UserData[]>
{
return this._exampleDatabase.dataChange;
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable<UserData[]> {
return this._exampleDatabase.dataChange;
}
disconnect()
{
}
disconnect() {}
}

4
src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.css Executable file
View File

@ -0,0 +1,4 @@
.demo-tree-node {
display: flex;
align-items: center;
}

14
src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.html Executable file
View File

@ -0,0 +1,14 @@
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
<cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="demo-tree-node">
<button mat-icon-button disabled></button>
{{node.filename}}: {{node.type}}
</cdk-tree-node>
<cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding class="demo-tree-node">
<button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.filename}}: {{node.type}}
</cdk-tree-node>
</cdk-tree>

160
src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts Executable file
View File

@ -0,0 +1,160 @@
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';
/**
* File node data with nested structure.
* Each node has a filename, and a type or a list of children.
*/
export class FileNode {
children: FileNode[];
filename: string;
type: any;
}
/** Flat node with expandable and level information */
export class FileFlatNode {
filename: string;
type: any;
level: number;
expandable: boolean;
}
/**
* The file structure tree data in string. The data could be parsed into a Json object
*/
const TREE_DATA = `
{
"Documents": {
"angular": {
"src": {
"core": "ts",
"compiler": "ts"
}
},
"material2": {
"src": {
"button": "ts",
"checkbox": "ts",
"input": "ts"
}
}
},
"Downloads": {
"Tutorial": "html",
"November": "pdf",
"October": "pdf"
},
"Pictures": {
"Sun": "png",
"Woods": "jpg",
"Photo Booth Library": {
"Contents": "dir",
"Pictures": "dir"
}
},
"Applications": {
"Chrome": "app",
"Calendar": "app",
"Webstorm": "app"
}
}`;
/**
* File database, it can build a tree structured Json object from string.
* Each node in Json object represents a file or a directory. For a file, it has filename and type.
* For a directory, it has filename and children (a list of files or directories).
* The input will be a json object string, and the output is a list of `FileNode` with nested
* structure.
*/
@Injectable()
export class FileDatabase {
dataChange: BehaviorSubject<FileNode[]> = new BehaviorSubject<FileNode[]>([]);
get data(): FileNode[] { return this.dataChange.value; }
constructor() {
this.initialize();
}
initialize() {
// Parse the string to json object.
const dataObject = JSON.parse(TREE_DATA);
// Build the tree nodes from Json object. The result is a list of `FileNode` with nested
// file node as children.
const data = this.buildFileTree(dataObject, 0);
// Notify the change.
this.dataChange.next(data);
}
/**
* Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
* The return value is the list of `FileNode`.
*/
buildFileTree(value: any, level: number): FileNode[] {
let data: any[] = [];
for (let k in value) {
let v = value[k];
let node = new FileNode();
node.filename = `${k}`;
if (v === null || v === undefined) {
// no action
} else if (typeof v === 'object') {
node.children = this.buildFileTree(v, level + 1);
} else {
node.type = v;
}
data.push(node);
}
return data;
}
}
/**
* @title Tree with flat nodes
*/
@Component({
selector: 'cdk-tree-flat-example',
templateUrl: 'cdk-tree-flat-example.html',
styleUrls: ['cdk-tree-flat-example.css'],
providers: [FileDatabase]
})
export class CdkTreeFlatExample {
treeControl: FlatTreeControl<FileFlatNode>;
treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;
dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;
constructor(database: FileDatabase) {
this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel,
this._isExpandable, this._getChildren);
this.treeControl = new FlatTreeControl<FileFlatNode>(this._getLevel, this._isExpandable);
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
database.dataChange.subscribe(data => {
this.dataSource.data = data;
});
}
transformer = (node: FileNode, level: number) => {
let flatNode = new FileFlatNode();
flatNode.filename = node.filename;
flatNode.type = node.type;
flatNode.level = level;
flatNode.expandable = !!node.children;
return flatNode;
}
private _getLevel = (node: FileFlatNode) => { return node.level; };
private _isExpandable = (node: FileFlatNode) => { return node.expandable; };
private _getChildren = (node: FileNode): Observable<FileNode[]> => { return of(node.children); };
hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
}

15
src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.css Executable file
View File

@ -0,0 +1,15 @@
.example-tree-invisible {
display: none;
}
.example-tree ul,
.example-tree li {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
}
.example-tree-node {
display: block;
padding-left: 40px;
}

17
src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.html Executable file
View File

@ -0,0 +1,17 @@
<cdk-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
<cdk-nested-tree-node *cdkTreeNodeDef="let node" class="example-tree-node">
<button mat-icon-button disabled></button>
{{node.filename}}: {{node.type}}
</cdk-nested-tree-node>
<cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasNestedChild" class="example-tree-node">
<button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
<mat-icon class="mat-icon-rtl-mirror">
{{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.filename}}: {{node.type}}
<div [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
<ng-container cdkTreeNodeOutlet></ng-container>
</div>
</cdk-nested-tree-node>
</cdk-tree>

131
src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts Executable file
View File

@ -0,0 +1,131 @@
import {Component, Injectable} from '@angular/core';
import {NestedTreeControl} from '@angular/cdk/tree';
import {MatTreeNestedDataSource} from '@angular/material/tree';
import {of, BehaviorSubject} from 'rxjs';
/**
* Json node data with nested structure. Each node has a filename and a value or a list of children
*/
export class FileNode {
children: FileNode[];
filename: string;
type: any;
}
/**
* The Json tree data in string. The data could be parsed into Json object
*/
const TREE_DATA = `
{
"Documents": {
"angular": {
"src": {
"core": "ts",
"compiler": "ts"
}
},
"material2": {
"src": {
"button": "ts",
"checkbox": "ts",
"input": "ts"
}
}
},
"Downloads": {
"Tutorial": "html",
"November": "pdf",
"October": "pdf"
},
"Pictures": {
"Sun": "png",
"Woods": "jpg",
"Photo Booth Library": {
"Contents": "dir",
"Pictures": "dir"
}
},
"Applications": {
"Chrome": "app",
"Calendar": "app",
"Webstorm": "app"
}
}`;
/**
* File database, it can build a tree structured Json object from string.
* Each node in Json object represents a file or a directory. For a file, it has filename and type.
* For a directory, it has filename and children (a list of files or directories).
* The input will be a json object string, and the output is a list of `FileNode` with nested
* structure.
*/
@Injectable()
export class FileDatabase {
dataChange: BehaviorSubject<FileNode[]> = new BehaviorSubject<FileNode[]>([]);
get data(): FileNode[] { return this.dataChange.value; }
constructor() {
this.initialize();
}
initialize() {
// Parse the string to json object.
const dataObject = JSON.parse(TREE_DATA);
// Build the tree nodes from Json object. The result is a list of `FileNode` with nested
// file node as children.
const data = this.buildFileTree(dataObject, 0);
// Notify the change.
this.dataChange.next(data);
}
/**
* Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
* The return value is the list of `FileNode`.
*/
buildFileTree(value: any, level: number): FileNode[] {
let data: any[] = [];
for (let k in value) {
let v = value[k];
let node = new FileNode();
node.filename = `${k}`;
if (v === null || v === undefined) {
// no action
} else if (typeof v === 'object') {
node.children = this.buildFileTree(v, level + 1);
} else {
node.type = v;
}
data.push(node);
}
return data;
}
}
/**
* @title Tree with nested nodes
*/
@Component({
selector: 'cdk-tree-nested-example',
templateUrl: 'cdk-tree-nested-example.html',
styleUrls: ['cdk-tree-nested-example.css'],
providers: [FileDatabase]
})
export class CdkTreeNestedExample {
nestedTreeControl: NestedTreeControl<FileNode>;
nestedDataSource: MatTreeNestedDataSource<FileNode>;
constructor(database: FileDatabase) {
this.nestedTreeControl = new NestedTreeControl<FileNode>(this._getChildren);
this.nestedDataSource = new MatTreeNestedDataSource();
database.dataChange.subscribe(data => this.nestedDataSource.data = data);
}
private _getChildren = (node: FileNode) => { return of(node.children); };
hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); };
}

12
src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.css Normal file → Executable file
View File

@ -1,14 +1,14 @@
.example-h2 {
margin: 10px;
margin: 10px;
}
.example-section {
display: flex;
align-content: center;
align-items: center;
height: 60px;
display: flex;
align-content: center;
align-items: center;
height: 60px;
}
.example-margin {
margin: 0 10px;
margin: 0 10px;
}

60
src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html Normal file → Executable file
View File

@ -1,40 +1,40 @@
<mat-card>
<mat-card-content>
<h2 class="example-h2">Checkbox configuration</h2>
<mat-card-content>
<h2 class="example-h2">Checkbox configuration</h2>
<section class="example-section">
<mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
<mat-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
</section>
<section class="example-section">
<mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
<mat-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
</section>
<section class="example-section">
<label class="example-margin">Align:</label>
<mat-radio-group [(ngModel)]="align">
<mat-radio-button class="example-margin" value="start">Start</mat-radio-button>
<mat-radio-button class="example-margin" value="end">End</mat-radio-button>
</mat-radio-group>
</section>
<section class="example-section">
<label class="example-margin">Align:</label>
<mat-radio-group [(ngModel)]="labelPosition">
<mat-radio-button class="example-margin" value="after">After</mat-radio-button>
<mat-radio-button class="example-margin" value="before">Before</mat-radio-button>
</mat-radio-group>
</section>
<section class="example-section">
<mat-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</mat-checkbox>
</section>
</mat-card-content>
<section class="example-section">
<mat-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</mat-checkbox>
</section>
</mat-card-content>
</mat-card>
<mat-card class="result">
<mat-card-content>
<h2 class="example-h2">Result</h2>
<mat-card-content>
<h2 class="example-h2">Result</h2>
<section class="example-section">
<mat-checkbox
class="example-margin"
[(ngModel)]="checked"
[(indeterminate)]="indeterminate"
[align]="align"
[disabled]="disabled">
I'm a checkbox
</mat-checkbox>
</section>
</mat-card-content>
<section class="example-section">
<mat-checkbox
class="example-margin"
[(ngModel)]="checked"
[(indeterminate)]="indeterminate"
[labelPosition]="labelPosition"
[disabled]="disabled">
I'm a checkbox
</mat-checkbox>
</section>
</mat-card-content>
</mat-card>

19
src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts Normal file → Executable file
View File

@ -1,17 +1,16 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';
/**
* @title Configurable checkbox
*/
@Component({
selector : 'checkbox-configurable-example',
templateUrl: 'checkbox-configurable-example.html',
styleUrls : ['checkbox-configurable-example.css']
selector: 'checkbox-configurable-example',
templateUrl: 'checkbox-configurable-example.html',
styleUrls: ['checkbox-configurable-example.css'],
})
export class CheckboxConfigurableExample
{
checked = false;
indeterminate = false;
align = 'start';
disabled = false;
export class CheckboxConfigurableExample {
checked = false;
indeterminate = false;
labelPosition = 'after';
disabled = false;
}

0
src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.css Normal file → Executable file
View File

0
src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.html Normal file → Executable file
View File

11
src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.ts Normal file → Executable file
View File

@ -1,12 +1,11 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';
/**
* @title Basic checkboxes
*/
@Component({
selector : 'checkbox-overview-example',
templateUrl: 'checkbox-overview-example.html'
selector: 'checkbox-overview-example',
templateUrl: 'checkbox-overview-example.html',
styleUrls: ['checkbox-overview-example.css'],
})
export class CheckboxOverviewExample
{
}
export class CheckboxOverviewExample {}

3
src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.css Executable file
View File

@ -0,0 +1,3 @@
.demo-chip-list {
width: 100%;
}

27
src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html Executable file
View File

@ -0,0 +1,27 @@
<mat-form-field class="demo-chip-list">
<mat-chip-list #chipList>
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(remove)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
placeholder="New fruit..."
#fruitInput
[formControl]="fruitCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)"
/>
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
{{ fruit }}
</mat-option>
</mat-autocomplete>
</mat-form-field>

79
src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts Executable file
View File

@ -0,0 +1,79 @@
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MatAutocompleteSelectedEvent, MatChipInputEvent} from '@angular/material';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
/**
* @title Chips Autocomplete
*/
@Component({
selector: 'chips-autocomplete-example',
templateUrl: 'chips-autocomplete-example.html',
styleUrls: ['chips-autocomplete-example.css']
})
export class ChipsAutocompleteExample {
visible: boolean = true;
selectable: boolean = true;
removable: boolean = true;
addOnBlur: boolean = false;
separatorKeysCodes = [ENTER, COMMA];
fruitCtrl = new FormControl();
filteredFruits: Observable<any[]>;
fruits = [
{ name: 'Lemon' },
];
allFruits = [
'Orange',
'Strawberry',
'Lime',
'Apple',
];
@ViewChild('fruitInput') fruitInput: ElementRef;
constructor() {
this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
startWith(null),
map((fruit: string | null) => fruit ? this.filter(fruit) : this.allFruits.slice()));
}
add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;
// Add our fruit
if ((value || '').trim()) {
this.fruits.push({ name: value.trim() });
}
// Reset the input value
if (input) {
input.value = '';
}
}
remove(fruit: any): void {
const index = this.fruits.indexOf(fruit);
if (index >= 0) {
this.fruits.splice(index, 1);
}
}
filter(name: string) {
return this.allFruits.filter(fruit =>
fruit.toLowerCase().indexOf(name.toLowerCase()) === 0);
}
selected(event: MatAutocompleteSelectedEvent): void {
this.fruits.push({ name: event.option.viewValue });
this.fruitInput.nativeElement.value = '';
}
}

2
src/assets/angular-material-examples/chips-input/chips-input-example.css Normal file → Executable file
View File

@ -1,3 +1,3 @@
.demo-chip-list {
width: 100%;
width: 100%;
}

24
src/assets/angular-material-examples/chips-input/chips-input-example.html Normal file → Executable file
View File

@ -1,14 +1,14 @@
<mat-form-field class="demo-chip-list">
<mat-chip-list #chipList>
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (remove)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="New fruit..."
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)"/>
</mat-chip-list>
<mat-chip-list #chipList>
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (removed)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="New fruit..."
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)" />
</mat-chip-list>
</mat-form-field>

77
src/assets/angular-material-examples/chips-input/chips-input-example.ts Normal file → Executable file
View File

@ -1,56 +1,51 @@
import { Component } from '@angular/core';
import { MatChipInputEvent } from '@angular/material';
import { ENTER, COMMA } from '@angular/cdk/keycodes';
import {Component} from '@angular/core';
import {MatChipInputEvent} from '@angular/material';
import {ENTER, COMMA} from '@angular/cdk/keycodes';
/**
* @title Chips with input
*/
@Component({
selector : 'chips-input-example',
templateUrl: 'chips-input-example.html',
styleUrls : ['chips-input-example.css']
selector: 'chips-input-example',
templateUrl: 'chips-input-example.html',
styleUrls: ['chips-input-example.css']
})
export class ChipsInputExample
{
visible: boolean = true;
selectable: boolean = true;
removable: boolean = true;
addOnBlur: boolean = true;
export class ChipsInputExample {
visible: boolean = true;
selectable: boolean = true;
removable: boolean = true;
addOnBlur: boolean = true;
// Enter, comma
separatorKeysCodes = [ENTER, COMMA];
// Enter, comma
separatorKeysCodes = [ENTER, COMMA];
fruits = [
{name: 'Lemon'},
{name: 'Lime'},
{name: 'Apple'}
];
fruits = [
{ name: 'Lemon' },
{ name: 'Lime' },
{ name: 'Apple' },
];
add(event: MatChipInputEvent): void
{
let input = event.input;
let value = event.value;
// Add our person
if ( (value || '').trim() )
{
this.fruits.push({name: value.trim()});
}
add(event: MatChipInputEvent): void {
let input = event.input;
let value = event.value;
// Reset the input value
if ( input )
{
input.value = '';
}
// Add our fruit
if ((value || '').trim()) {
this.fruits.push({ name: value.trim() });
}
remove(fruit: any): void
{
let index = this.fruits.indexOf(fruit);
if ( index >= 0 )
{
this.fruits.splice(index, 1);
}
// Reset the input value
if (input) {
input.value = '';
}
}
remove(fruit: any): void {
let index = this.fruits.indexOf(fruit);
if (index >= 0) {
this.fruits.splice(index, 1);
}
}
}

0
src/assets/angular-material-examples/chips-overview/chips-overview-example.css Normal file → Executable file
View File

8
src/assets/angular-material-examples/chips-overview/chips-overview-example.html Normal file → Executable file
View File

@ -1,6 +1,6 @@
<mat-chip-list>
<mat-chip>One fish</mat-chip>
<mat-chip>Two fish</mat-chip>
<mat-chip color="primary" selected="true">Primary fish</mat-chip>
<mat-chip color="accent" selected="true">Accent fish</mat-chip>
<mat-chip>One fish</mat-chip>
<mat-chip>Two fish</mat-chip>
<mat-chip color="primary" selected="true">Primary fish</mat-chip>
<mat-chip color="accent" selected="true">Accent fish</mat-chip>
</mat-chip-list>

12
src/assets/angular-material-examples/chips-overview/chips-overview-example.ts Normal file → Executable file
View File

@ -1,13 +1,11 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';
/**
* @title Basic chips
*/
@Component({
selector : 'chips-overview-example',
templateUrl: 'chips-overview-example.html',
styleUrls : ['chips-overview-example.css']
selector: 'chips-overview-example',
templateUrl: 'chips-overview-example.html',
styleUrls: ['chips-overview-example.css'],
})
export class ChipsOverviewExample
{
}
export class ChipsOverviewExample {}

2
src/assets/angular-material-examples/chips-stacked/chips-stacked-example.css Normal file → Executable file
View File

@ -1,3 +1,3 @@
mat-chip {
max-width: 200px;
max-width: 200px;
}

6
src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html Normal file → Executable file
View File

@ -1,5 +1,5 @@
<mat-chip-list class="mat-chip-list-stacked">
<mat-chip *ngFor="let chip of availableColors" selected="true" [color]="chip.color">
{{chip.name}}
</mat-chip>
<mat-chip *ngFor="let chip of availableColors" selected="true" [color]="chip.color">
{{chip.name}}
</mat-chip>
</mat-chip-list>

37
src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts Normal file → Executable file
View File

@ -1,33 +1,20 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';
/**
* @title Stacked chips
*/
@Component({
selector : 'chips-stacked-example',
templateUrl: 'chips-stacked-example.html',
styleUrls : ['chips-stacked-example.css']
selector: 'chips-stacked-example',
templateUrl: 'chips-stacked-example.html',
styleUrls: ['chips-stacked-example.css'],
})
export class ChipsStackedExample
{
color: string;
export class ChipsStackedExample {
color: string;
availableColors = [
{
name : 'none',
color: ''
},
{
name : 'Primary',
color: 'primary'
},
{
name : 'Accent',
color: 'accent'
},
{
name : 'Warn',
color: 'warn'
}
];
availableColors = [
{ name: 'none', color: '' },
{ name: 'Primary', color: 'primary' },
{ name: 'Accent', color: 'accent' },
{ name: 'Warn', color: 'warn' }
];
}

0
src/assets/angular-material-examples/datepicker-api/datepicker-api-example.css Normal file → Executable file
View File

4
src/assets/angular-material-examples/datepicker-api/datepicker-api-example.html Normal file → Executable file
View File

@ -1,5 +1,5 @@
<mat-form-field class="example-full-width">
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker #picker></mat-datepicker>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

12
src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts Normal file → Executable file
View File

@ -1,11 +1,9 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';
/** @title Datepicker open method */
@Component({
selector : 'datepicker-api-example',
templateUrl: 'datepicker-api-example.html',
styleUrls : ['datepicker-api-example.css']
selector: 'datepicker-api-example',
templateUrl: 'datepicker-api-example.html',
styleUrls: ['datepicker-api-example.css'],
})
export class DatepickerApiExample
{
}
export class DatepickerApiExample {}

1
src/assets/angular-material-examples/datepicker-color/datepicker-color-example.css Executable file
View File

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

13
src/assets/angular-material-examples/datepicker-color/datepicker-color-example.html Executable file
View File

@ -0,0 +1,13 @@
<mat-form-field color="accent">
<mat-label>Inherited calendar color</mat-label>
<input matInput [matDatepicker]="picker1">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
<mat-form-field color="accent">
<mat-label>Custom calendar color</mat-label>
<input matInput [matDatepicker]="picker2">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2 color="primary"></mat-datepicker>
</mat-form-field>

9
src/assets/angular-material-examples/datepicker-color/datepicker-color-example.ts Executable file
View File

@ -0,0 +1,9 @@
import {Component} from '@angular/core';
/** @title Datepicker palette colors */
@Component({
selector: 'datepicker-color-example',
templateUrl: 'datepicker-color-example.html',
styleUrls: ['datepicker-color-example.css'],
})
export class DatepickerColorExample {}

16
src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.css Executable file
View File

@ -0,0 +1,16 @@
.example-header {
display: flex;
align-items: center;
padding: 0.5em;
}
.example-header-label {
flex: 1;
height: 1em;
font-weight: bold;
text-align: center;
}
.example-double-arrow .mat-icon {
margin: -22%;
}

6
src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.html Executable file
View File

@ -0,0 +1,6 @@
<mat-form-field>
<mat-label>Custom calendar header</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker [calendarHeaderComponent]="exampleHeader"></mat-datepicker>
</mat-form-field>

86
src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts Executable file
View File

@ -0,0 +1,86 @@
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Host,
Inject,
OnDestroy,
ViewEncapsulation
} from '@angular/core';
import {MatCalendar} from '@angular/material';
import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
/** @title Datepicker with custom calendar header */
@Component({
selector: 'datepicker-custom-header-example',
templateUrl: 'datepicker-custom-header-example.html',
styleUrls: ['datepicker-custom-header-example.css'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DatepickerCustomHeaderExample {
exampleHeader = ExampleHeader;
}
/** Custom header component for datepicker. */
@Component({
selector: 'example-header',
template: `
<div class="example-header">
<button mat-icon-button class="example-double-arrow" (click)="previousClicked('year')">
<mat-icon>keyboard_arrow_left</mat-icon>
<mat-icon>keyboard_arrow_left</mat-icon>
</button>
<button mat-icon-button (click)="previousClicked('month')">
<mat-icon>keyboard_arrow_left</mat-icon>
</button>
<span class="example-header-label">{{periodLabel}}</span>
<button mat-icon-button (click)="nextClicked('month')">
<mat-icon>keyboard_arrow_right</mat-icon>
</button>
<button mat-icon-button class="example-double-arrow" (click)="nextClicked('year')">
<mat-icon>keyboard_arrow_right</mat-icon>
<mat-icon>keyboard_arrow_right</mat-icon>
</button>
</div>
`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExampleHeader<D> implements OnDestroy {
private destroyed = new Subject<void>();
constructor(@Host() private calendar: MatCalendar<D>,
private dateAdapter: DateAdapter<D>,
@Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
cdr: ChangeDetectorRef) {
calendar.stateChanges
.pipe(takeUntil(this.destroyed))
.subscribe(() => cdr.markForCheck());
}
ngOnDestroy() {
this.destroyed.next();
this.destroyed.complete();
}
get periodLabel() {
return this.dateAdapter
.format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel)
.toLocaleUpperCase();
}
previousClicked(mode: 'month' | 'year') {
this.calendar.activeDate = mode == 'month' ?
this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) :
this.dateAdapter.addCalendarYears(this.calendar.activeDate, -1);
}
nextClicked(mode: 'month' | 'year') {
this.calendar.activeDate = mode == 'month' ?
this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) :
this.dateAdapter.addCalendarYears(this.calendar.activeDate, 1);
}
}

0
src/assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example.css Normal file → Executable file
View File

30
src/assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example.html Normal file → Executable file
View File

@ -1,23 +1,23 @@
<p>
<mat-form-field>
<input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
<mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
<mat-datepicker #dp1></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
<mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
<mat-datepicker #dp1></mat-datepicker>
</mat-form-field>
</p>
<p>
<mat-form-field>
<input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
<mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
<mat-datepicker #dp2></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
<mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
<mat-datepicker #dp2></mat-datepicker>
</mat-form-field>
</p>
<p>
<mat-form-field>
<input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
<mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
<mat-datepicker #dp3 disabled="false"></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
<mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
<mat-datepicker #dp3 disabled="false"></mat-datepicker>
</mat-form-field>
</p>

12
src/assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example.ts Normal file → Executable file
View File

@ -1,11 +1,9 @@
import { Component } from '@angular/core';
import {Component} from '@angular/core';
/** @title Disabled datepicker */
@Component({
selector : 'datepicker-disabled-example',
templateUrl: 'datepicker-disabled-example.html',
styleUrls : ['datepicker-disabled-example.css']
selector: 'datepicker-disabled-example',
templateUrl: 'datepicker-disabled-example.html',
styleUrls: ['datepicker-disabled-example.css'],
})
export class DatepickerDisabledExample
{
}
export class DatepickerDisabledExample {}

8
src/assets/angular-material-examples/datepicker-events/datepicker-events-example.css Normal file → Executable file
View File

@ -1,6 +1,6 @@
.example-events {
width: 400px;
height: 200px;
border: 1px solid #555;
overflow: auto;
width: 400px;
height: 200px;
border: 1px solid #555;
overflow: auto;
}

10
src/assets/angular-material-examples/datepicker-events/datepicker-events-example.html Normal file → Executable file
View File

@ -1,10 +1,10 @@
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Input & change events"
(dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<input matInput [matDatepicker]="picker" placeholder="Input & change events"
(dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<div class="example-events">
<div *ngFor="let e of events">{{e}}</div>
<div *ngFor="let e of events">{{e}}</div>
</div>

22
src/assets/angular-material-examples/datepicker-events/datepicker-events-example.ts Normal file → Executable file
View File

@ -1,18 +1,16 @@
import { Component } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import {Component} from '@angular/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';
/** @title Datepicker input and change events */
@Component({
selector : 'datepicker-events-example',
templateUrl: 'datepicker-events-example.html',
styleUrls : ['datepicker-events-example.css']
selector: 'datepicker-events-example',
templateUrl: 'datepicker-events-example.html',
styleUrls: ['datepicker-events-example.css'],
})
export class DatepickerEventsExample
{
events: string[] = [];
export class DatepickerEventsExample {
events: string[] = [];
addEvent(type: string, event: MatDatepickerInputEvent<Date>)
{
this.events.push(`${type}: ${event.value}`);
}
addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
this.events.push(`${type}: ${event.value}`);
}
}

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