Skip to content

Commit cdbd59a

Browse files
devversiondevversion
committed
docs: add example for providing custom MatPaginatorIntl
Adds an example for providing a custom `MatPaginatorIntl`. The example also show-cases the use with `@angular/localize`. Fixes #8239.
1 parent c4f836c commit cdbd59a

File tree

12 files changed

+181
-5
lines changed

12 files changed

+181
-5
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@
7777
"@angular/bazel": "^12.0.0",
7878
"@angular/compiler-cli": "^12.0.0",
7979
"@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#2e0271af93b020a811323fbc274afcf588dbc91e",
80+
"@angular/localize": "^12.0.0",
8081
"@angular/platform-browser-dynamic": "^12.0.0",
8182
"@angular/platform-server": "^12.0.0",
8283
"@angular/router": "^12.0.0",

‎packages.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ VERSION_PLACEHOLDER_REPLACEMENTS = {
2525
# List of default Angular library UMD bundles which are not processed by ngcc.
2626
ANGULAR_NO_NGCC_BUNDLES = [
2727
("@angular/compiler", ["compiler.umd.js"]),
28+
("@angular/localize", ["localize.umd.js", "localize-init.umd.js"]),
2829
]
2930

3031
# List of Angular library UMD bundles which will are processed by ngcc.

‎src/components-examples/material/paginator/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ ng_module(
1616
deps = [
1717
"//src/cdk/testing",
1818
"//src/cdk/testing/testbed",
19+
"//src/components-examples/private:localize_types",
1920
"//src/material/input",
2021
"//src/material/paginator",
2122
"//src/material/paginator/testing",

‎src/components-examples/material/paginator/index.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,22 @@ import {
88
} from './paginator-configurable/paginator-configurable-example';
99
import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example';
1010
import {PaginatorHarnessExample} from './paginator-harness/paginator-harness-example';
11+
import {
12+
PaginatorIntlExample,
13+
PaginatorIntlExampleModule,
14+
} from './paginator-intl/paginator-intl-example';
1115

1216
export {
1317
PaginatorConfigurableExample,
1418
PaginatorHarnessExample,
19+
PaginatorIntlExample,
1520
PaginatorOverviewExample,
1621
};
1722

1823
const EXAMPLES = [
1924
PaginatorConfigurableExample,
2025
PaginatorHarnessExample,
26+
// PaginatorIntlExample is imported through it's own example module.
2127
PaginatorOverviewExample,
2228
];
2329

@@ -26,6 +32,7 @@ const EXAMPLES = [
2632
CommonModule,
2733
MatInputModule,
2834
MatPaginatorModule,
35+
PaginatorIntlExampleModule,
2936
FormsModule,
3037
],
3138
declarations: EXAMPLES,

‎src/components-examples/material/paginator/paginator-intl/paginator-intl-example.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<mat-paginator [length]="0" [pageSizeOptions]="[10, 50, 100]">
2+
</mat-paginator>

‎src/components-examples/material/paginator/paginator-intl/paginator-intl-example.ts

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import {Component, Injectable, NgModule} from '@angular/core';
2+
import {MatPaginatorIntl, MatPaginatorModule} from '@angular/material/paginator';
3+
import {Subject} from 'rxjs';
4+
5+
@Injectable()
6+
export class MyCustomPaginatorIntl implements MatPaginatorIntl {
7+
changes = new Subject<void>();
8+
9+
// For internationalization, the `$localize` function from
10+
// the `@angular/localize` package can be used.
11+
firstPageLabel = $localize`First page`;
12+
itemsPerPageLabel = $localize`Items per page:`;
13+
lastPageLabel = $localize`Last page`;
14+
15+
// You can set labels to an arbitrary string too, or dynamically compute
16+
// it through other third-party internationalization libraries.
17+
nextPageLabel = 'Next page';
18+
previousPageLabel = 'Previous page';
19+
20+
getRangeLabel(page: number, pageSize: number, length: number): string {
21+
if (length === 0) {
22+
return $localize`Page 1 of 1`;
23+
}
24+
const amountPages = Math.ceil(length / pageSize);
25+
return $localize`Page ${page + 1} of ${amountPages}`
26+
}
27+
}
28+
29+
/**
30+
* @title Paginator internationalization
31+
*/
32+
@Component({
33+
selector: 'paginator-intl-example',
34+
templateUrl: 'paginator-intl-example.html',
35+
})
36+
export class PaginatorIntlExample {}
37+
38+
@NgModule({
39+
imports: [MatPaginatorModule],
40+
declarations: [PaginatorIntlExample],
41+
providers: [
42+
{provide: MatPaginatorIntl, useClass: MyCustomPaginatorIntl}
43+
]
44+
})
45+
export class PaginatorIntlExampleModule {}

‎src/components-examples/private/BUILD.bazel

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,8 @@ ts_library(
1111
"@npm//@angular/core",
1212
],
1313
)
14+
15+
ts_library(
16+
name = "localize_types",
17+
srcs = ["localize-types.d.ts"],
18+
)

‎src/components-examples/private/localize-types.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import {LocalizeFn} from '@angular/localize/src/localize';
2+
3+
declare global {
4+
const $localize: LocalizeFn;
5+
}

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ ng_module(
9696
"//src/dev-app/virtual-scroll",
9797
"//src/dev-app/youtube-player",
9898
"//src/material/core",
99+
"@npm//@angular/localize",
99100
"@npm//@angular/router",
100101
],
101102
)

‎src/dev-app/main.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
/**
10-
* This is the main entry-point for the AOT compilation. File will be used to test AOT support.
11-
*/
9+
// Load `$localize` for examples using it.
10+
import '@angular/localize/init';
1211

1312
import {platformBrowser} from '@angular/platform-browser';
1413
import {MainModuleNgFactory} from './main-module.ngfactory';

‎tools/system-config-tmpl.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,8 +126,9 @@ function setupFrameworkPackages() {
126126
// When running with Ivy, we need to load the ngcc processed UMD bundles.
127127
// These are stored in the `__ivy_ngcc_` folder that has been generated
128128
// since we run ngcc with `--create-ivy-entry-points`. Filter out the compiler
129-
// package because it won't be processed by ngcc.
130-
if (isRunningWithIvy && entryPointName !== '@angular/compiler') {
129+
// and localize package because it won't be processed by ngcc.
130+
if (isRunningWithIvy && entryPointName !== '@angular/compiler' &&
131+
!entryPointName.startsWith('@angular/localize')) {
131132
bundlePath = '__ivy_ngcc__/' + bundlePath;
132133
}
133134
packagesConfig[entryPointName] = {

‎yarn.lock

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,15 @@
156156
dependencies:
157157
tslib "^2.1.0"
158158

159+
"@angular/localize@^12.0.0":
160+
version "12.0.1"
161+
resolved "https://registry.yarnpkg.com/@angular/localize/-/localize-12.0.1.tgz#6477066b6e4830c9dffa931064794108961d4364"
162+
integrity sha512-+nLvfbX2tQUMCDILlUOhb1o3B7DzcJgrEy3QEG3dGkT7A7RjA5zShXN+CXuaeEMlTSGURVx3IEzuudpGcgLz9Q==
163+
dependencies:
164+
"@babel/core" "7.8.3"
165+
glob "7.1.7"
166+
yargs "^16.2.0"
167+
159168
"@angular/platform-browser-dynamic@^12.0.0":
160169
version "12.0.0"
161170
resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.0.0.tgz#295036e7b487b6dbe3b13db763a371675d391ee6"
@@ -236,6 +245,27 @@
236245
resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.13.12.tgz#a8a5ccac19c200f9dd49624cac6e19d7be1236a1"
237246
integrity sha512-3eJJ841uKxeV8dcN/2yGEUy+RfgQspPEgQat85umsE1rotuquQ2AbIub4S6j7c50a2d+4myc+zSlnXeIHrOnhQ==
238247

248+
"@babel/[email protected]":
249+
version "7.8.3"
250+
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.8.3.tgz#30b0ebb4dd1585de6923a0b4d179e0b9f5d82941"
251+
integrity sha512-4XFkf8AwyrEG7Ziu3L2L0Cv+WyY47Tcsp70JFmpftbAA1K7YL/sgE9jh9HyNj08Y/U50ItUchpN0w6HxAoX1rA==
252+
dependencies:
253+
"@babel/code-frame" "^7.8.3"
254+
"@babel/generator" "^7.8.3"
255+
"@babel/helpers" "^7.8.3"
256+
"@babel/parser" "^7.8.3"
257+
"@babel/template" "^7.8.3"
258+
"@babel/traverse" "^7.8.3"
259+
"@babel/types" "^7.8.3"
260+
convert-source-map "^1.7.0"
261+
debug "^4.1.0"
262+
gensync "^1.0.0-beta.1"
263+
json5 "^2.1.0"
264+
lodash "^4.17.13"
265+
resolve "^1.3.2"
266+
semver "^5.4.1"
267+
source-map "^0.5.0"
268+
239269
"@babel/core@>=7.9.0":
240270
version "7.9.0"
241271
resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
@@ -329,6 +359,15 @@
329359
jsesc "^2.5.1"
330360
source-map "^0.5.0"
331361

362+
"@babel/generator@^7.14.2", "@babel/generator@^7.8.3":
363+
version "7.14.3"
364+
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.3.tgz#0c2652d91f7bddab7cccc6ba8157e4f40dcedb91"
365+
integrity sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==
366+
dependencies:
367+
"@babel/types" "^7.14.2"
368+
jsesc "^2.5.1"
369+
source-map "^0.5.0"
370+
332371
"@babel/generator@^7.9.0", "@babel/generator@^7.9.5":
333372
version "7.9.5"
334373
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.5.tgz#27f0917741acc41e6eaaced6d68f96c3fa9afaf9"
@@ -367,6 +406,15 @@
367406
"@babel/template" "^7.12.13"
368407
"@babel/types" "^7.12.13"
369408

409+
"@babel/helper-function-name@^7.14.2":
410+
version "7.14.2"
411+
resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz#397688b590760b6ef7725b5f0860c82427ebaac2"
412+
integrity sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==
413+
dependencies:
414+
"@babel/helper-get-function-arity" "^7.12.13"
415+
"@babel/template" "^7.12.13"
416+
"@babel/types" "^7.14.2"
417+
370418
"@babel/helper-function-name@^7.9.5":
371419
version "7.9.5"
372420
resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz#2b53820d35275120e1874a82e5aabe1376920a5c"
@@ -591,6 +639,11 @@
591639
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
592640
integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
593641

642+
"@babel/helper-validator-identifier@^7.14.0":
643+
version "7.14.0"
644+
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
645+
integrity sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==
646+
594647
"@babel/helper-validator-identifier@^7.9.0", "@babel/helper-validator-identifier@^7.9.5":
595648
version "7.9.5"
596649
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80"
@@ -619,6 +672,15 @@
619672
"@babel/traverse" "^7.13.0"
620673
"@babel/types" "^7.13.0"
621674

675+
"@babel/helpers@^7.8.3":
676+
version "7.14.0"
677+
resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.14.0.tgz#ea9b6be9478a13d6f961dbb5f36bf75e2f3b8f62"
678+
integrity sha512-+ufuXprtQ1D1iZTO/K9+EBRn+qPWMJjZSw/S0KlFrxCw4tkrzv9grgpDHkY9MeQTjTY8i2sp7Jep8DfU6tN9Mg==
679+
dependencies:
680+
"@babel/template" "^7.12.13"
681+
"@babel/traverse" "^7.14.0"
682+
"@babel/types" "^7.14.0"
683+
622684
"@babel/helpers@^7.9.0":
623685
version "7.9.2"
624686
resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.9.2.tgz#b42a81a811f1e7313b88cba8adc66b3d9ae6c09f"
@@ -684,6 +746,11 @@
684746
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.12.tgz#ba320059420774394d3b0c0233ba40e4250b81d1"
685747
integrity sha512-4T7Pb244rxH24yR116LAuJ+adxXXnHhZaLJjegJVKSdoNCe4x1eDBaud5YIcQFcqzsaD5BHvJw5BQ0AZapdCRw==
686748

749+
"@babel/parser@^7.14.2", "@babel/parser@^7.8.3":
750+
version "7.14.3"
751+
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.3.tgz#9b530eecb071fd0c93519df25c5ff9f14759f298"
752+
integrity sha512-7MpZDIfI7sUC5zWo2+foJ50CSI5lcqDehZ0lVgIhSi4bFEk94fLAKlF3Q0nzSQQ+ca0lm+O6G9ztKVBeu8PMRQ==
753+
687754
"@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
688755
version "7.9.4"
689756
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
@@ -751,6 +818,20 @@
751818
globals "^11.1.0"
752819
lodash "^4.17.19"
753820

821+
"@babel/traverse@^7.14.0", "@babel/traverse@^7.8.3":
822+
version "7.14.2"
823+
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.2.tgz#9201a8d912723a831c2679c7ebbf2fe1416d765b"
824+
integrity sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==
825+
dependencies:
826+
"@babel/code-frame" "^7.12.13"
827+
"@babel/generator" "^7.14.2"
828+
"@babel/helper-function-name" "^7.14.2"
829+
"@babel/helper-split-export-declaration" "^7.12.13"
830+
"@babel/parser" "^7.14.2"
831+
"@babel/types" "^7.14.2"
832+
debug "^4.1.0"
833+
globals "^11.1.0"
834+
754835
"@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
755836
version "7.9.5"
756837
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.5.tgz#6e7c56b44e2ac7011a948c21e283ddd9d9db97a2"
@@ -808,6 +889,14 @@
808889
lodash "^4.17.19"
809890
to-fast-properties "^2.0.0"
810891

892+
"@babel/types@^7.14.0", "@babel/types@^7.14.2":
893+
version "7.14.2"
894+
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.2.tgz#4208ae003107ef8a057ea8333e56eb64d2f6a2c3"
895+
integrity sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==
896+
dependencies:
897+
"@babel/helper-validator-identifier" "^7.14.0"
898+
to-fast-properties "^2.0.0"
899+
811900
"@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.9.0", "@babel/types@^7.9.5":
812901
version "7.9.5"
813902
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444"
@@ -7243,6 +7332,18 @@ [email protected], glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6, glob@^7.1.1, glo
72437332
once "^1.3.0"
72447333
path-is-absolute "^1.0.0"
72457334

7335+
[email protected]:
7336+
version "7.1.7"
7337+
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
7338+
integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
7339+
dependencies:
7340+
fs.realpath "^1.0.0"
7341+
inflight "^1.0.4"
7342+
inherits "2"
7343+
minimatch "^3.0.4"
7344+
once "^1.3.0"
7345+
path-is-absolute "^1.0.0"
7346+
72467347
glob@^5.0.15:
72477348
version "5.0.15"
72487349
resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
@@ -8690,6 +8791,13 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
86908791
resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
86918792
integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
86928793

8794+
json5@^2.1.0:
8795+
version "2.2.0"
8796+
resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
8797+
integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
8798+
dependencies:
8799+
minimist "^1.2.5"
8800+
86938801
json5@^2.1.2:
86948802
version "2.1.3"
86958803
resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"

0 commit comments

Comments
 (0)