From f555b85ff9e39d4c038ab243f0d9dbcedf0fa74d Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Wed, 16 Feb 2022 23:16:33 +0000
Subject: [PATCH 1/3] feat(material-experimental/mdc-list): add support for
 marking the activated mat-nav-list item

---
 src/dev-app/mdc-list/mdc-list-demo.html    |  4 ++--
 src/dev-app/mdc-list/mdc-list-demo.ts      | 11 ++++++++++-
 src/material-experimental/mdc-list/list.ts | 11 +++++++++++
 3 files changed, 23 insertions(+), 3 deletions(-)

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 @@ <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>
@@ -99,7 +99,7 @@ <h2>Nav lists</h2>
       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>
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/list.ts b/src/material-experimental/mdc-list/list.ts
index 58643391d646..a7b8bd082d44 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,
@@ -46,6 +47,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 +64,15 @@ export class MatListItem extends MatListItemBase {
   @ViewChild('unscopedContent') _unscopedContent: ElementRef<HTMLSpanElement>;
   @ViewChild('text') _itemText: ElementRef<HTMLElement>;
 
+  @Input()
+  get activated() {
+    return this._activated;
+  }
+  set activated(activated) {
+    this._activated = activated;
+  }
+  _activated = false;
+
   constructor(
     element: ElementRef,
     ngZone: NgZone,

From 3834a34490f9f439e47fc988ef20197a48a1b774 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 18 Feb 2022 06:29:42 +0000
Subject: [PATCH 2/3] fixup! feat(material-experimental/mdc-list): add support
 for marking the activated mat-nav-list item

---
 src/material-experimental/mdc-list/list.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/material-experimental/mdc-list/list.ts b/src/material-experimental/mdc-list/list.ts
index a7b8bd082d44..57ff45fc4c89 100644
--- a/src/material-experimental/mdc-list/list.ts
+++ b/src/material-experimental/mdc-list/list.ts
@@ -64,6 +64,7 @@ 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;

From 9e10e0ecb76b0932eaf17a5101fd691c9269e028 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 18 Feb 2022 06:32:45 +0000
Subject: [PATCH 3/3] fixup! feat(material-experimental/mdc-list): add support
 for marking the activated mat-nav-list item

---
 src/material-experimental/mdc-list/BUILD.bazel | 1 +
 src/material-experimental/mdc-list/list.ts     | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

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 57ff45fc4c89..cc839be2b785 100644
--- a/src/material-experimental/mdc-list/list.ts
+++ b/src/material-experimental/mdc-list/list.ts
@@ -27,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',
@@ -70,7 +71,7 @@ export class MatListItem extends MatListItemBase {
     return this._activated;
   }
   set activated(activated) {
-    this._activated = activated;
+    this._activated = coerceBooleanProperty(activated);
   }
   _activated = false;