feat: setup challenge 44

apps/angular/view-transition/src/app/app.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
+
+@Component({
+  standalone: true,
+  imports: [RouterLink, RouterOutlet],
+  selector: 'app-root',
+  template: `
+    <div class="flex gap-3">
+      <button
+        class="rounded-md border border-blue-500 bg-blue-200 px-4 py-2 text-xl"
+        routerLink="foo">
+        Foo
+      </button>
+      <button
+        class="rounded-md border border-blue-500 bg-blue-200 px-4 py-2 text-xl"
+        routerLink="bar">
+        Bar
+      </button>
+    </div>
+    <router-outlet />
+  `,
+  host: {
+    class: 'flex flex-col gap-10 border p-10 h-screen',
+  },
+  styles: [''],
+})
+export class AppComponent {}

apps/angular/view-transition/src/app/app.config.ts

@@ -0,0 +1,14 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter, withViewTransitions } from '@angular/router';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(
+      [
+        { path: 'bar', loadComponent: () => import('./bar.component') },
+        { path: 'foo', loadComponent: () => import('./foo.component') },
+      ],
+      withViewTransitions(),
+    ),
+  ],
+};

apps/angular/view-transition/src/app/bar.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+@Component({
+  selector: 'app-bar',
+  standalone: true,
+  imports: [],
+  template: `
+    bar-component
+  `,
+  host: {
+    class: 'block h-full bg-green-500',
+  },
+})
+export default class BarComponent {}

apps/angular/view-transition/src/app/foo.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-foo',
+  standalone: true,
+  imports: [],
+  template: `
+    <div class="count">app-foo</div>
+  `,
+  host: {
+    class: 'block h-full bg-red-500',
+  },
+  styles: `
+      .count {
+        view-transition-name: count;
+        width: fit-content
+      }
+    `,
+})
+export default class FooComponent {}