feat(material-experimental/mdc-list): add support for marking the act… (#24433)

* feat(material-experimental/mdc-list): add support for marking the activated mat-nav-list item

* fixup! feat(material-experimental/mdc-list): add support for marking the activated mat-nav-list item

* fixup! feat(material-experimental/mdc-list): add support for marking the activated mat-nav-list item

Author: mmalerba

src/dev-app/mdc-list/mdc-list-demo.html

@@ -91,15 +91,15 @@ <h2>Dense lists</h2>
   <div>
     <h2>Nav lists</h2>
     <mat-nav-list>
-      <a mat-list-item *ngFor="let link of links" href="http://www.google.com">
+      <a mat-list-item *ngFor="let link of links" [href]="link.href" [activated]="isActivated(link.href)">
         {{ link.name }}
       </a>
     </mat-nav-list>
     <div *ngIf="infoClicked">
       More info!
     </div>
     <mat-nav-list>
-      <a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
+      <a mat-list-item *ngFor="let link of links; last as last" [href]="link.href" [activated]="isActivated(link.href)">
         <mat-icon matListItemIcon>folder</mat-icon>
         <span matListItemTitle>{{ link.name }}</span>
       </a>

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();
+  }
 }

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",

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<HTMLSpanElement>;
   @ViewChild('text') _itemText: ElementRef<HTMLElement>;
 
+  /** Indicates whether an item in a `<mat-nav-list>` 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,