diff --git a/src/dev-app/mdc-list/mdc-list-demo.html b/src/dev-app/mdc-list/mdc-list-demo.html
index e8b2d376c888..13ec4aec9b94 100644
--- a/src/dev-app/mdc-list/mdc-list-demo.html
+++ b/src/dev-app/mdc-list/mdc-list-demo.html
@@ -91,7 +91,7 @@
Dense lists
-
+
folder
{{ link.name }}
diff --git a/src/dev-app/mdc-list/mdc-list-demo.ts b/src/dev-app/mdc-list/mdc-list-demo.ts
index a33fb58b67d4..6bd7b8dd695d 100644
--- a/src/dev-app/mdc-list/mdc-list-demo.ts
+++ b/src/dev-app/mdc-list/mdc-list-demo.ts
@@ -46,7 +46,12 @@ export class MdcListDemo {
},
];
- links: {name: string}[] = [{name: 'Inbox'}, {name: 'Outbox'}, {name: 'Spam'}, {name: 'Trash'}];
+ links: {name: string; href: string}[] = [
+ {name: 'Inbox', href: '/mdc-list#inbox'},
+ {name: 'Outbox', href: '/mdc-list#outbox'},
+ {name: 'Spam', href: '/mdc-list#spam'},
+ {name: 'Trash', href: '/mdc-list#trash'},
+ ];
thirdLine = false;
showBoxes = false;
@@ -72,4 +77,8 @@ export class MdcListDemo {
alertItem(msg: string) {
alert(msg);
}
+
+ isActivated(href: string) {
+ return window.location.href === new URL(href, window.location.href).toString();
+ }
}
diff --git a/src/material-experimental/mdc-list/BUILD.bazel b/src/material-experimental/mdc-list/BUILD.bazel
index 43fb6793d02c..aa713af6367c 100644
--- a/src/material-experimental/mdc-list/BUILD.bazel
+++ b/src/material-experimental/mdc-list/BUILD.bazel
@@ -25,6 +25,7 @@ ng_module(
] + glob(["**/*.html"]),
deps = [
"//src:dev_mode_types",
+ "//src/cdk/coercion",
"//src/cdk/collections",
"//src/cdk/observers",
"//src/material-experimental/mdc-core",
diff --git a/src/material-experimental/mdc-list/list.ts b/src/material-experimental/mdc-list/list.ts
index 58643391d646..cc839be2b785 100644
--- a/src/material-experimental/mdc-list/list.ts
+++ b/src/material-experimental/mdc-list/list.ts
@@ -10,6 +10,7 @@ import {Platform} from '@angular/cdk/platform';
import {
ChangeDetectionStrategy,
Component,
+ Input,
ContentChildren,
ElementRef,
Inject,
@@ -26,6 +27,7 @@ import {
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {MatListBase, MatListItemBase} from './list-base';
import {MatListItemLine, MatListItemMeta, MatListItemTitle} from './list-item-sections';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
@Component({
selector: 'mat-list',
@@ -46,6 +48,7 @@ export class MatList extends MatListBase {}
exportAs: 'matListItem',
host: {
'class': 'mat-mdc-list-item mdc-list-item',
+ '[class.mdc-list-item--activated]': 'activated',
'[class.mdc-list-item--with-leading-avatar]': '_avatars.length !== 0',
'[class.mdc-list-item--with-leading-icon]': '_icons.length !== 0',
'[class.mdc-list-item--with-trailing-meta]': '_meta.length !== 0',
@@ -62,6 +65,16 @@ export class MatListItem extends MatListItemBase {
@ViewChild('unscopedContent') _unscopedContent: ElementRef;
@ViewChild('text') _itemText: ElementRef;
+ /** Indicates whether an item in a `` is the currently active page. */
+ @Input()
+ get activated() {
+ return this._activated;
+ }
+ set activated(activated) {
+ this._activated = coerceBooleanProperty(activated);
+ }
+ _activated = false;
+
constructor(
element: ElementRef,
ngZone: NgZone,