Answer:21

apps/angular/21-anchor-navigation/src/app/app.config.ts

@@ -1,6 +1,14 @@
 import { ApplicationConfig } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withInMemoryScrolling } from '@angular/router';
 import { appRoutes } from './app.routes';
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(appRoutes)],
+  providers: [
+    provideRouter(
+      appRoutes,
+      withInMemoryScrolling({
+        anchorScrolling: 'enabled',
+        scrollPositionRestoration: 'enabled',
+      }),
+    ),
+  ],
 };

apps/angular/21-anchor-navigation/src/app/home.component.ts

@@ -5,14 +5,18 @@ import { NavButtonComponent } from './nav-button.component';
   imports: [NavButtonComponent],
   selector: 'app-home',
   template: `
-    <nav-button href="/foo" class="fixed left-1/2 top-3">Foo Page</nav-button>
+    <nav-button routerLink="/foo" class="fixed left-1/2 top-3">
+      Foo Page
+    </nav-button>
     <div id="top" class="h-screen bg-gray-500">
       Empty
-      <nav-button href="#bottom">Scroll Bottom</nav-button>
+      <nav-button routerLink="/home" fragment="bottom">
+        Scroll Bottom
+      </nav-button>
     </div>
     <div id="bottom" class="h-screen bg-blue-300">
       I want to scroll each
-      <nav-button href="#top">Scroll Top</nav-button>
+      <nav-button routerLink="/home" fragment="top">Scroll Top</nav-button>
     </div>
   `,
 })

apps/angular/21-anchor-navigation/src/app/nav-button.component.ts

@@ -1,10 +1,12 @@
 /* eslint-disable @angular-eslint/component-selector */
 import { Component, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'nav-button',
+  imports: [RouterLink],
   template: `
-    <a [href]="href()">
+    <a [routerLink]="routerLink()" [fragment]="fragment()">
       <ng-content />
     </a>
   `,
@@ -13,5 +15,6 @@ import { Component, input } from '@angular/core';
   },
 })
 export class NavButtonComponent {
-  href = input('');
+  routerLink = input('');
+  fragment = input<string | undefined>(undefined);
 }

apps/angular/8-pure-pipe/src/app/app.component.ts

@@ -1,18 +1,15 @@
 import { Component } from '@angular/core';
+import { ShowIndexPipe } from './pipe/show-index.pipe';
 
 @Component({
   selector: 'app-root',
+  imports: [ShowIndexPipe],
   template: `
     @for (person of persons; track person) {
-      {{ heavyComputation(person, $index) }}
+      {{ person | showIndex: $index }}
     }
   `,
 })
 export class AppComponent {
   persons = ['toto', 'jack'];
-
-  heavyComputation(name: string, index: number) {
-    // very heavy computation
-    return `${name} - ${index}`;
-  }
 }

apps/angular/8-pure-pipe/src/app/pipe/show-index.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'showIndex',
+})
+export class ShowIndexPipe implements PipeTransform {
+  transform(value: string, index: number): string {
+    return `${value} ${index}`;
+  }
+}