build: remove remaining legacy references in e2e

Removes the remaining usages of legacy components in the e2e app. Also adds a click handler so the navigation closes when a link is clicked.

Author: crisbeto

src/e2e-app/BUILD.bazel

@@ -50,8 +50,6 @@ ng_module(
         "//src/material/grid-list",
         "//src/material/icon",
         "//src/material/input",
-        "//src/material/legacy-form-field",
-        "//src/material/legacy-list",
         "//src/material/menu",
         "//src/material/progress-bar",
         "//src/material/progress-spinner",

src/e2e-app/e2e-app/e2e-app-layout.html

@@ -1,7 +1,7 @@
 <button (click)="showLinks = !showLinks">Toggle Navigation Links</button>
 
 <main>
-  <mat-nav-list *ngIf="showLinks">
+  <mat-nav-list *ngIf="showLinks" (click)="showLinks = false">
     <a mat-list-item *ngFor="let link of navLinks" [routerLink]="[link.path]">{{link.title}}</a>
   </mat-nav-list>
 

src/e2e-app/e2e-app/e2e-app-layout.ts

@@ -12,19 +12,19 @@ export class E2eAppLayout {
   showLinks = false;
 
   navLinks = [
-    {path: 'block-scroll-strategy', title: 'Block scroll strategy'},
+    {path: 'block-scroll-strategy', title: 'Block Scroll Strategy'},
     {path: 'button', title: 'Button'},
     {path: 'button-toggle', title: 'Button Toggle'},
     {path: 'checkbox', title: 'Checkbox'},
     {path: 'component-harness', title: 'Component Harness'},
     {path: 'dialog', title: 'Dialog'},
     {path: 'expansion', title: 'Expansion'},
-    {path: 'grid-list', title: 'Grid list'},
+    {path: 'grid-list', title: 'Grid List'},
     {path: 'icon', title: 'Icon'},
     {path: 'input', title: 'Input'},
     {path: 'list', title: 'List'},
     {path: 'menu', title: 'Menu'},
-    {path: 'progress-bar', title: 'Progress bar'},
+    {path: 'progress-bar', title: 'Progress Bar'},
     {path: 'progress-spinner', title: 'Progress Spinner'},
     {path: 'radio', title: 'Radio'},
     {path: 'select', title: 'Select'},

src/e2e-app/e2e-app/e2e-app-module.ts

@@ -8,12 +8,12 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyListModule} from '@angular/material/legacy-list';
+import {MatListModule} from '@angular/material/list';
 import {RouterModule} from '@angular/router';
 import {E2eAppLayout, Home} from './e2e-app-layout';
 
 @NgModule({
-  imports: [CommonModule, MatLegacyListModule, RouterModule],
+  imports: [CommonModule, MatListModule, RouterModule],
   declarations: [E2eAppLayout, Home],
   exports: [E2eAppLayout],
 })

src/e2e-app/theme.scss

@@ -18,4 +18,3 @@ $candy-app-theme: mat.define-light-theme((
 
 // Include the default theme styles.
 @include mat.all-component-themes($candy-app-theme);
-@include mat.all-legacy-component-themes($candy-app-theme);