feat: create challenge 48 without solution

apps/angular/dialog-alert-form/src/app/pages/join.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormComponent } from '../ui/form.component';
+
+@Component({
+  standalone: true,
+  imports: [FormComponent],
+  template: `
+    <section class="mx-auto	max-w-screen-sm">
+      <div class="rounded-lg bg-white p-8 shadow-lg lg:p-12">
+        <app-form />
+      </div>
+    </section>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class JoinComponent {}

apps/angular/dialog-alert-form/src/app/pages/page.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs';
+
+@Component({
+  standalone: true,
+  template: `
+    <section>
+      <h1>{{ title() }}</h1>
+    </section>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageComponent {
+  title = toSignal(inject(ActivatedRoute).data.pipe(map((d) => d['title'])));
+}