Update Angular Material for v17

.github/workflows/main.yml

@@ -31,4 +31,4 @@ jobs:
           browser: chrome
           start: npm start
           install: false
-          wait-on: 'http://[::1]:4200'
+          wait-on: http://[::1]:4200

README.adoc

@@ -676,7 +676,7 @@ export class EditComponent implements OnInit, OnDestroy {
 
   async gotoList() {
     if (this.person) {
-      await this.router.navigate(['/search', {term: this.person.name} ]);
+      await this.router.navigate(['/search', {term: this.person.name}]);
     } else {
       await this.router.navigate(['/search']);
     }
@@ -1539,37 +1539,27 @@ ng add @angular/material
 
 When prompted for the theme, pick the one you prefer, using the links to preview them. Accept the defaults for the other questions.
 
-Add the relevant Material modules as imports in `app.module.ts`:
+Change your HTML templates to use Material components. For example, change `<h1>` in `app.component.html` to be `<mat-toolbar>`.
 
-[source,javascript]
-.src/app/app.module.ts
+[source,html]
+.src/app/app.component.html
 ----
-import { MatButtonModule } from '@angular/material/button';
-import { MatListModule } from '@angular/material/list';
-import { MatInputModule } from '@angular/material/input';
-import { MatIconModule } from '@angular/material/icon';
-import { MatToolbarModule } from '@angular/material/toolbar';
-
-@NgModule({
-  ...
-  imports: [
-    ...
-    MatButtonModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatToolbarModule
-  ],
-  ...
-})
+<mat-toolbar>Welcome to {{ title }}!</mat-toolbar>
 ----
 
-Change HTML templates to use Material components. For example, change `<h1>` in `app.component.html` to be `<mat-toolbar>`.
+You'll need to import the `MatToolbarModule` in `app.component.ts` for it to compile.
 
-[source,html]
-.src/app/app.component.html
+[source,typescript]
 ----
-<mat-toolbar>Welcome to {{ title }}!</mat-toolbar>
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet, MatToolbarModule],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
 ----
 
 After modifying your templates to match this branch, the edit screen will look as follows.

cypress/e2e/edit.cy.ts

@@ -15,7 +15,7 @@ describe('Edit', () => {
     cy.get('#name').type(' Rocks!');
     cy.get('#save').click();
     // verify one element matched this change
-    const list = cy.get('app-search mat-list mat-list-item');
+    const list = cy.get('app-search mat-list-item');
     list.should('have.length', 1);
   });
 });

cypress/e2e/search.cy.ts

@@ -12,7 +12,7 @@ describe('Search', () => {
   it('should allow searching', () => {
     cy.get('input').type('A');
     cy.get('button').click();
-    const list = cy.get('app-search mat-list mat-list-item');
+    const list = cy.get('app-search mat-list-item');
     list.should('have.length', 3);
   });
 });