feat(doc): move bug-cd

apps/angular/bug-cd/src/app/app.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  standalone: true,
+  imports: [RouterOutlet],
+  selector: 'app-root',
+  template: `
+    <h1 class="text-xl px-4 py-2">My Application</h1>
+    <section class="flex">
+      <router-outlet name="side" />
+      <div class="border p-4">
+        <router-outlet />
+      </div>
+    </section>
+  `,
+  host: {
+    class: 'flex flex-col gap-2',
+  },
+})
+export class AppComponent {}

apps/angular/bug-cd/src/app/app.config.ts

@@ -0,0 +1,30 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { BarComponent } from './bar.component';
+import { FooComponent } from './foo.component';
+import { MainNavigationComponent } from './main-navigation.component';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter([
+      {
+        path: '',
+        component: MainNavigationComponent,
+        outlet: 'side',
+      },
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'foo',
+      },
+      {
+        path: 'foo',
+        component: FooComponent,
+      },
+      {
+        path: 'bar',
+        component: BarComponent,
+      },
+    ]),
+  ],
+};

apps/angular/bug-cd/src/app/bar.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-bar',
+  standalone: true,
+  template: ` BarComponent `,
+})
+export class BarComponent {}

apps/angular/bug-cd/src/app/fake.service.ts

@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+import { delay, of } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class FakeServiceService {
+  getInfoFromBackend = () => of('Client app').pipe(delay(500));
+}

apps/angular/bug-cd/src/app/foo.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-foo',
+  standalone: true,
+  template: `Foo Component `,
+})
+export class FooComponent {}

apps/angular/bug-cd/src/app/main-navigation.component.ts

@@ -0,0 +1,67 @@
+import { AsyncPipe, NgFor, NgIf } from '@angular/common';
+import { Component, Input, inject } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { FakeServiceService } from './fake.service';
+
+interface MenuItem {
+  path: string;
+  name: string;
+}
+
+@Component({
+  selector: 'app-nav',
+  standalone: true,
+  imports: [RouterLink, RouterLinkActive, NgFor],
+  template: `
+    <ng-container *ngFor="let menu of menus">
+      <a
+        class="border px-4 py-2 rounded-md"
+        [routerLink]="menu.path"
+        routerLinkActive="isSelected">
+        {{ menu.name }}
+      </a>
+    </ng-container>
+  `,
+  styles: [
+    `
+      a.isSelected {
+        @apply bg-gray-600 text-white;
+      }
+    `,
+  ],
+  host: {
+    class: 'flex flex-col p-2 gap-2',
+  },
+})
+export class NavigationComponent {
+  @Input() menus!: MenuItem[];
+}
+
+@Component({
+  standalone: true,
+  imports: [NavigationComponent, NgIf, AsyncPipe],
+  template: `
+    <ng-container *ngIf="info$ | async as info">
+      <ng-container *ngIf="info !== null; else noInfo">
+        <app-nav [menus]="getMenu(info)" />
+      </ng-container>
+    </ng-container>
+
+    <ng-template #noInfo>
+      <app-nav [menus]="getMenu('')" />
+    </ng-template>
+  `,
+  host: {},
+})
+export class MainNavigationComponent {
+  private fakeBackend = inject(FakeServiceService);
+
+  readonly info$ = this.fakeBackend.getInfoFromBackend();
+
+  getMenu(prop: string) {
+    return [
+      { path: '/foo', name: `Foo ${prop}` },
+      { path: '/bar', name: `Bar ${prop}` },
+    ];
+  }
+}