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

Nav lists

- + {{ link.name }} @@ -99,7 +99,7 @@

Nav lists

More info!
- + 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,