rewrote with signals

Author: c4ffein

src/app/core/auth/auth.component.html

@@ -12,9 +12,9 @@ <h1 class="text-xs-center">{{ title }}</h1>
             <a [routerLink]="['/register']">Need an account?</a>
           }
         </p>
-        <app-list-errors [errors]="errors" />
+        <app-list-errors [errors]="errors()" />
         <form [formGroup]="authForm" (ngSubmit)="submitForm()">
-          <fieldset [disabled]="isSubmitting">
+          <fieldset [disabled]="isSubmitting()">
             <fieldset class="form-group">
               @if (authType === 'register') {
                 <input

src/app/core/auth/auth.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
 import { Validators, FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { ListErrorsComponent } from '../../shared/components/list-errors.component';
@@ -21,11 +21,10 @@ interface AuthForm {
 export default class AuthComponent implements OnInit {
   authType = '';
   title = '';
-  errors: Errors = { errors: {} };
-  isSubmitting = false;
+  errors = signal<Errors>({ errors: {} });
+  isSubmitting = signal(false);
   authForm: FormGroup<AuthForm>;
   destroyRef = inject(DestroyRef);
-  cdr = inject(ChangeDetectorRef);
 
   constructor(
     private readonly route: ActivatedRoute,
@@ -59,8 +58,8 @@ export default class AuthComponent implements OnInit {
   }
 
   submitForm(): void {
-    this.isSubmitting = true;
-    this.errors = { errors: {} };
+    this.isSubmitting.set(true);
+    this.errors.set({ errors: {} });
 
     let observable =
       this.authType === 'login'
@@ -76,9 +75,8 @@ export default class AuthComponent implements OnInit {
     observable.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
       next: () => void this.router.navigate(['/']),
       error: err => {
-        this.errors = err;
-        this.isSubmitting = false;
-        this.cdr.markForCheck();
+        this.errors.set(err);
+        this.isSubmitting.set(false);
       },
     });
   }

src/app/core/auth/if-authenticated.directive.ts

@@ -1,13 +1,4 @@
-import {
-  ChangeDetectorRef,
-  DestroyRef,
-  Directive,
-  inject,
-  Input,
-  OnInit,
-  TemplateRef,
-  ViewContainerRef,
-} from '@angular/core';
+import { DestroyRef, Directive, inject, Input, OnInit, signal, TemplateRef, ViewContainerRef } from '@angular/core';
 import { UserService } from './services/user.service';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
@@ -17,33 +8,31 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 })
 export class IfAuthenticatedDirective<T> implements OnInit {
   destroyRef = inject(DestroyRef);
-  cdr = inject(ChangeDetectorRef);
   constructor(
     private templateRef: TemplateRef<T>,
     private userService: UserService,
     private viewContainer: ViewContainerRef,
   ) {}
 
-  condition: boolean = false;
-  hasView = false;
+  condition = signal(false);
+  hasView = signal(false);
 
   ngOnInit() {
     this.userService.isAuthenticated.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((isAuthenticated: boolean) => {
-      const authRequired = isAuthenticated && this.condition;
-      const unauthRequired = !isAuthenticated && !this.condition;
+      const authRequired = isAuthenticated && this.condition();
+      const unauthRequired = !isAuthenticated && !this.condition();
 
-      if ((authRequired || unauthRequired) && !this.hasView) {
+      if ((authRequired || unauthRequired) && !this.hasView()) {
         this.viewContainer.createEmbeddedView(this.templateRef);
-        this.hasView = true;
-      } else if (this.hasView) {
+        this.hasView.set(true);
+      } else if (this.hasView()) {
         this.viewContainer.clear();
-        this.hasView = false;
+        this.hasView.set(false);
       }
-      this.cdr.markForCheck();
     });
   }
 
   @Input() set ifAuthenticated(condition: boolean) {
-    this.condition = condition;
+    this.condition.set(condition);
   }
 }

src/app/features/article/components/article-list.component.ts

@@ -1,13 +1,13 @@
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   DestroyRef,
   EventEmitter,
   inject,
   Input,
   OnChanges,
   Output,
+  signal,
   SimpleChanges,
 } from '@angular/core';
 import { ArticlesService } from '../services/articles.service';
@@ -22,13 +22,13 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 @Component({
   selector: 'app-article-list',
   template: `
-    @if (loading === LoadingState.LOADING) {
+    @if (loading() === LoadingState.LOADING) {
       <div class="article-preview">Loading articles...</div>
     }
 
-    @if (loading === LoadingState.LOADED) {
-      @for (article of results; track article.slug) {
-        <app-article-preview [article]="article" />
+    @if (loading() === LoadingState.LOADED) {
+      @for (article of results(); track article.slug) {
+        <app-article-preview [articleInput]="article" />
       } @empty {
         <div class="article-preview empty-feed-message">
           @if (isFollowingFeed) {
@@ -42,8 +42,8 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
       <nav>
         <ul class="pagination">
-          @for (pageNumber of totalPages; track pageNumber) {
-            <li class="page-item" [ngClass]="{ active: pageNumber === page }">
+          @for (pageNumber of totalPages(); track pageNumber) {
+            <li class="page-item" [ngClass]="{ active: pageNumber === page() }">
               <button class="page-link" (click)="setPageTo(pageNumber)">
                 {{ pageNumber }}
               </button>
@@ -63,13 +63,12 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 })
 export class ArticleListComponent implements OnChanges {
   query!: ArticleListConfig;
-  results: Article[] = [];
-  page = 1;
-  totalPages: Array<number> = [];
-  loading = LoadingState.NOT_LOADED;
+  results = signal<Article[]>([]);
+  page = signal(1);
+  totalPages = signal<number[]>([]);
+  loading = signal(LoadingState.NOT_LOADED);
   LoadingState = LoadingState;
   destroyRef = inject(DestroyRef);
-  cdr = inject(ChangeDetectorRef);
 
   @Input() limit!: number;
   @Input() config!: ArticleListConfig;
@@ -85,12 +84,12 @@ export class ArticleListComponent implements OnChanges {
       this.query = configChange.currentValue;
       // Only reset page if currentPage wasn't also provided in this change
       if (!pageChange?.currentValue) {
-        this.page = 1;
+        this.page.set(1);
       }
     }
 
     if (pageChange?.currentValue) {
-      this.page = pageChange.currentValue;
+      this.page.set(pageChange.currentValue);
     }
 
     // Run query if we have a config and either config or page changed
@@ -102,33 +101,34 @@ export class ArticleListComponent implements OnChanges {
   constructor(private articlesService: ArticlesService) {}
 
   setPageTo(pageNumber: number) {
-    if (pageNumber !== this.page) {
-      this.page = pageNumber;
+    if (pageNumber !== this.page()) {
+      this.page.set(pageNumber);
       this.pageChange.emit(pageNumber);
       this.runQuery();
     }
   }
 
   runQuery() {
-    this.loading = LoadingState.LOADING;
-    this.results = [];
+    this.loading.set(LoadingState.LOADING);
+    this.results.set([]);
 
     // Create limit and offset filter (if necessary)
     if (this.limit) {
       this.query.filters.limit = this.limit;
-      this.query.filters.offset = this.limit * (this.page - 1);
+      this.query.filters.offset = this.limit * (this.page() - 1);
     }
 
     this.articlesService
       .query(this.query)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(data => {
-        this.loading = LoadingState.LOADED;
-        this.results = data.articles;
+        this.loading.set(LoadingState.LOADED);
+        this.results.set(data.articles);
 
         // Used from http://www.jstips.co/en/create-range-0...n-easily-using-one-line/
-        this.totalPages = Array.from(new Array(Math.ceil(data.articlesCount / this.limit)), (val, index) => index + 1);
-        this.cdr.markForCheck();
+        this.totalPages.set(
+          Array.from(new Array(Math.ceil(data.articlesCount / this.limit)), (val, index) => index + 1),
+        );
       });
   }
 }

src/app/features/article/components/article-preview.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core';
 import { Article } from '../models/article.model';
 import { ArticleMetaComponent } from './article-meta.component';
 import { RouterLink } from '@angular/router';
@@ -9,18 +9,18 @@ import { FavoriteButtonComponent } from './favorite-button.component';
   selector: 'app-article-preview',
   template: `
     <div class="article-preview">
-      <app-article-meta [article]="article">
-        <app-favorite-button [article]="article" (toggle)="toggleFavorite($event)" class="pull-xs-right">
-          {{ article.favoritesCount }}
+      <app-article-meta [article]="article()">
+        <app-favorite-button [article]="article()" (toggle)="toggleFavorite($event)" class="pull-xs-right">
+          {{ article().favoritesCount }}
         </app-favorite-button>
       </app-article-meta>
 
-      <a [routerLink]="['/article', article.slug]" class="preview-link">
-        <h1>{{ article.title }}</h1>
-        <p>{{ article.description }}</p>
+      <a [routerLink]="['/article', article().slug]" class="preview-link">
+        <h1>{{ article().title }}</h1>
+        <p>{{ article().description }}</p>
         <span>Read more...</span>
         <ul class="tag-list">
-          @for (tag of article.tagList; track tag) {
+          @for (tag of article().tagList; track tag) {
             <li class="tag-default tag-pill tag-outline">
               {{ tag }}
             </li>
@@ -33,17 +33,18 @@ import { FavoriteButtonComponent } from './favorite-button.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ArticlePreviewComponent {
-  cdr = inject(ChangeDetectorRef);
-  @Input() article!: Article;
+  article = signal<Article>(null!);
 
-  toggleFavorite(favorited: boolean): void {
-    this.article.favorited = favorited;
+  @Input({ required: true })
+  set articleInput(value: Article) {
+    this.article.set(value);
+  }
 
-    if (favorited) {
-      this.article.favoritesCount++;
-    } else {
-      this.article.favoritesCount--;
-    }
-    this.cdr.markForCheck();
+  toggleFavorite(favorited: boolean): void {
+    this.article.update(article => ({
+      ...article,
+      favorited,
+      favoritesCount: favorited ? article.favoritesCount + 1 : article.favoritesCount - 1,
+    }));
   }
 }

src/app/features/article/components/favorite-button.component.ts

@@ -1,12 +1,12 @@
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   DestroyRef,
   EventEmitter,
   inject,
   Input,
   Output,
+  signal,
 } from '@angular/core';
 import { Router } from '@angular/router';
 import { EMPTY, switchMap } from 'rxjs';
@@ -22,7 +22,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
     <button
       class="btn btn-sm"
       [ngClass]="{
-        disabled: isSubmitting,
+        disabled: isSubmitting(),
         'btn-outline-primary': !article.favorited,
         'btn-primary': article.favorited,
       }"
@@ -36,8 +36,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 })
 export class FavoriteButtonComponent {
   destroyRef = inject(DestroyRef);
-  cdr = inject(ChangeDetectorRef);
-  isSubmitting = false;
+  isSubmitting = signal(false);
 
   @Input() article!: Article;
   @Output() toggle = new EventEmitter<boolean>();
@@ -49,7 +48,7 @@ export class FavoriteButtonComponent {
   ) {}
 
   toggleFavorite(): void {
-    this.isSubmitting = true;
+    this.isSubmitting.set(true);
 
     this.userService.isAuthenticated
       .pipe(
@@ -69,13 +68,11 @@ export class FavoriteButtonComponent {
       )
       .subscribe({
         next: () => {
-          this.isSubmitting = false;
+          this.isSubmitting.set(false);
           this.toggle.emit(!this.article.favorited);
-          this.cdr.markForCheck();
         },
         error: () => {
-          this.isSubmitting = false;
-          this.cdr.markForCheck();
+          this.isSubmitting.set(false);
         },
       });
   }