Update ng-flutter embedding example to Angular v17 (#2081)

This should also fix the dependabot security alert currently open
against the repository
(https://github.com/flutter/samples/security/dependabot/8).

web_embedding/ng-flutter/src/app/app.component.ts

@@ -57,27 +57,32 @@ import { MatInputModule } from '@angular/material/input';
             <mat-option value="dash">Custom App</mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field appearance="outline" *ngIf="this.flutterState?.getScreen() == 'counter'">
-          <mat-label>Clicks</mat-label>
-          <input type="number" matInput (input)="onCounterSet($event)" [value]="this.flutterState?.getClicks()" />
-        </mat-form-field>
-        <mat-form-field appearance="outline" *ngIf="this.flutterState?.getScreen() != 'counter'">
-          <mat-label>Text</mat-label>
-          <input type="text" matInput (input)="onTextSet($event)" [value]="this.flutterState?.getText()" />
-          <button *ngIf="this.flutterState?.getText()" matSuffix mat-icon-button aria-label="Clear" (click)="this.flutterState?.setText('')">
-            <mat-icon>close</mat-icon>
-          </button>
-        </mat-form-field>
+        @if (this.flutterState?.getScreen() === 'counter') {
+          <mat-form-field appearance="outline">
+            <mat-label>Clicks</mat-label>
+            <input type="number" matInput (input)="onCounterSet($event)" [value]="this.flutterState?.getClicks()" />
+          </mat-form-field>
+        } @else {
+          <mat-form-field appearance="outline">
+            <mat-label>Text</mat-label>
+            <input type="text" matInput (input)="onTextSet($event)" [value]="this.flutterState?.getText()" />
+            @if (this.flutterState?.getText()) {
+              <button matSuffix mat-icon-button aria-label="Clear" (click)="this.flutterState?.setText('')">
+                <mat-icon>close</mat-icon>
+              </button>
+            }
+          </mat-form-field>    
+        }
       </section>
     </mat-nav-list>
   </mat-sidenav>
 
   <mat-sidenav-content class="sidenav-content">
     <div class="flutter-app" #container>
-        <ng-flutter
-          src="flutter/main.dart.js"
-          assetBase="/flutter/"
-          (appLoaded)="onFlutterAppLoaded($event)"></ng-flutter>
+      <ng-flutter
+        src="flutter/main.dart.js"
+        assetBase="/flutter/"
+        (appLoaded)="onFlutterAppLoaded($event)"></ng-flutter>
     </div>
   </mat-sidenav-content>
 </mat-sidenav-container>

web_embedding/ng-flutter/src/index.html

@@ -6,7 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>

web_embedding/ng-flutter/src/main.ts

@@ -10,5 +10,5 @@ bootstrapApplication(AppComponent, {
   providers: [
     provideRouter(appRoutes),
     importProvidersFrom(BrowserAnimationsModule)
-]
-})
+  ]
+})