refactor: use Angular modern styles (#493)

src/app/app.config.ts

@@ -1,10 +1,10 @@
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withFetch } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
-import { provideClientHydration } from '@angular/platform-browser';
+import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
 import { provideRouter, withComponentInputBinding, withInMemoryScrolling } from '@angular/router';
 
-import { routes } from './app.routes';
 import { provideAppTitleStrategy } from './app-title-strategy';
+import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -16,8 +16,8 @@ export const appConfig: ApplicationConfig = {
       }),
       withComponentInputBinding(),
     ),
-    provideHttpClient(),
-    provideClientHydration(),
+    provideHttpClient(withFetch()),
+    provideClientHydration(withIncrementalHydration()),
     provideAppTitleStrategy('Angular Japan User Group'),
   ],
 };

src/app/pages/home/home.component.ts

@@ -6,13 +6,11 @@ import { ICON_COMPONENTS } from '../../shared/icons';
 @Component({
   imports: [RouterLink, CardComponent, ICON_COMPONENTS],
   templateUrl: './home.component.html',
-  styles: [
-    `
+  styles: `
       :host {
         display: block;
       }
     `,
-  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomePageComponent {}

src/app/pages/markdown/markdown-page.component.ts

@@ -1,19 +1,20 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { MarkdownOutletComponent } from '../../shared/markdown-outlet/markdown-outlet.component';
 
 @Component({
   imports: [MarkdownOutletComponent],
-  template: `<app-markdown-outlet class="h-full" [content]="content" ngSkipHydration />`,
-  styles: [
-    `
+  template: `
+    @defer (hydrate never) {
+    <app-markdown-outlet class="h-full" [content]="content()" />
+    }
+  `,
+  styles: `
       :host {
         display: block;
       }
     `,
-  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MarkdownPageComponent {
-  @Input({ required: true })
-  readonly content!: string;
+  readonly content = input.required<string>();
 }

src/app/shared/card/card.component.ts

@@ -2,8 +2,17 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-card',
-  standalone: true,
-  templateUrl: './card.component.html',
+  template: `
+    <div class="h-full w-full bg-white rounded-md p-4 border border-gray-700 shadow">
+      <div class="flex flex-row items-center justify-start text-lg gap-2 mb-4">
+        <ng-content select="[card-icon]" />
+        <ng-content select="[card-title]" />
+      </div>
+      <div class="text-base">
+        <ng-content />
+      </div>
+    </div>
+  `,
   styleUrls: ['./card.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/shared/icons/icon-book/icon-book.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-icon-book',
-  standalone: true,
   template: `
     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path

src/app/shared/icons/icon-calendar/icon-calendar.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-icon-calendar',
-  standalone: true,
   template: `
     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path

src/app/shared/icons/icon-external-link/icon-external-link.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-icon-external-link',
-  standalone: true,
   template: `
     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path

src/app/shared/icons/icon-home/icon-home.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-icon-home',
-  standalone: true,
   template: `
     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path

src/app/shared/icons/icon-menu/icon-menu.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-icon-menu',
-  standalone: true,
   template: `
     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />

src/app/shared/icons/icon-online/icon-online.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-icon-online',
-  standalone: true,
   template: `
     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path

src/app/shared/icons/icon-people/icon-people.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-icon-people',
-  standalone: true,
   template: `
     <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path

src/app/shared/markdown-outlet/markdown-outlet.component.ts

@@ -1,15 +1,11 @@
-import { AsyncPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input, inject, signal } from '@angular/core';
-import { toObservable } from '@angular/core/rxjs-interop';
+import { ChangeDetectionStrategy, Component, inject, input, resource } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { map, switchMap } from 'rxjs';
 import { processMarkdown } from '../markdown';
 
 @Component({
   selector: 'app-markdown-outlet',
-  imports: [AsyncPipe],
   template: `
-    @if (rendered$ | async; as html) {
+    @if (renderedContent.value(); as html) {
     <div class="content-root" [innerHTML]="html"></div>
     }
   `,
@@ -22,14 +18,12 @@ import { processMarkdown } from '../markdown';
 })
 export class MarkdownOutletComponent {
   readonly #sanitizer = inject(DomSanitizer);
-  readonly #content = signal<string | null>(null);
-  readonly rendered$ = toObservable(this.#content).pipe(
-    switchMap((content) => processMarkdown(content ?? '')),
-    map((html) => this.#sanitizer.bypassSecurityTrustHtml(html)),
-  );
-
-  @Input()
-  set content(value: string) {
-    this.#content.set(value);
-  }
+  readonly content = input.required<string | null>();
+  readonly renderedContent = resource({
+    request: () => this.content() ?? undefined,
+    loader: async ({ request: content }) => {
+      const html = await processMarkdown(content);
+      return this.#sanitizer.bypassSecurityTrustHtml(html);
+    },
+  });
 }

src/app/shared/nav-list/nav-list.ts

@@ -4,7 +4,6 @@ import { RouterLinkActive } from '@angular/router';
 @Directive({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: '[appNavListItem]',
-  standalone: true,
   // eslint-disable-next-line @angular-eslint/no-host-metadata-property
   host: {
     class: 'flex items-center h-12 px-4 no-underline text-black hover:bg-gray-100',
@@ -22,7 +21,6 @@ export class NavListItemDirective {
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
   selector: '[appNavList]',
-  standalone: true,
   // eslint-disable-next-line @angular-eslint/no-host-metadata-property
   host: {
     class: 'flex flex-col py-2',