Fixing Angular 21 by migrating all values by signals. (#11)

frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html

@@ -4,34 +4,34 @@
         matTooltip="Close"
         matRipple
         i18n-matTooltip>
-    <mat-icon>close</mat-icon>
+  <mat-icon>close</mat-icon>
 </button>
 <header>
-    <h1 i18n>Add a code block</h1>
+  <h1 i18n>Add a code block</h1>
 </header>
 <form [formGroup]="formGroup" (submit)="closeAndValidate()" class="cod-form" ngNativeValidate>
-    <div class="form-content">
-        <mat-form-field>
-            <mat-label i18n>Programming language</mat-label>
-            <mat-select #programmingLanguageSelect formControlName="programmingLanguage">
-                @for(programmingLanguage of programmingLanguages; track programmingLanguage) {
-                    <mat-option [value]="programmingLanguage.code">
-                        {{programmingLanguage.label}}
-                    </mat-option>
-                }
-            </mat-select>
-        </mat-form-field>
-        <mat-form-field>
-            <mat-label i18n>Code block</mat-label>
-            <textarea matInput formControlName="codeBlock"></textarea>
-        </mat-form-field>
-    </div>
-    <div class="actions reversed">
-        <button type="submit" class="cod-button" matRipple i18n>
-            Validate
-        </button>
-        <button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n>
-            Cancel
-        </button>
-    </div>
+  <div class="form-content">
+    <mat-form-field>
+      <mat-label i18n>Programming language</mat-label>
+      <mat-select #programmingLanguageSelect formControlName="programmingLanguage">
+        @for (programmingLanguage of programmingLanguages; track programmingLanguage) {
+          <mat-option [value]="programmingLanguage.code">
+            {{ programmingLanguage.label }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label i18n>Code block</mat-label>
+      <textarea matInput formControlName="codeBlock"></textarea>
+    </mat-form-field>
+  </div>
+  <div class="actions reversed">
+    <button type="submit" class="cod-button" matRipple i18n>
+      Validate
+    </button>
+    <button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n>
+      Cancel
+    </button>
+  </div>
 </form>

frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss

@@ -1,30 +1,30 @@
 :host {
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  gap: 1em;
+  position: relative;
+  max-height: 90vh;
+
+  header {
+    flex: 1;
     display: flex;
-    flex-direction: column;
-    padding: 1em;
-    gap: 1em;
-    position: relative;
-    max-height: 90vh;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
 
-    header {
-        flex: 1;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-    }
+  form {
+    div {
+      &.form-content {
+        mat-form-field {
+          width: 100%;
 
-    form {
-        div {
-            &.form-content {
-                mat-form-field {
-                    width: 100%;
-
-                    textarea {
-                        height: 30vh;
-                    }
-                }
-            }
+          textarea {
+            height: 30vh;
+          }
         }
+      }
     }
-}
+  }
+}

frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts

@@ -1,119 +1,119 @@
-import { Component, inject } from "@angular/core";
-import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
-import { MatRippleModule } from "@angular/material/core";
-import { MatDialogRef } from "@angular/material/dialog";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatIcon } from "@angular/material/icon";
-import { MatInputModule } from "@angular/material/input";
-import { MatSelectModule } from '@angular/material/select';
-import { MatTooltip } from "@angular/material/tooltip";
+import {Component, inject} from "@angular/core";
+import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
+import {MatRippleModule} from "@angular/material/core";
+import {MatDialogRef} from "@angular/material/dialog";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatIcon} from "@angular/material/icon";
+import {MatInputModule} from "@angular/material/input";
+import {MatSelectModule} from '@angular/material/select';
+import {MatTooltip} from "@angular/material/tooltip";
 
 export interface ProgramingLanguage {
-    code: string;
-    label: string;
+  code: string;
+  label: string;
 }
 
 export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
-    {
-        code: 'bash',
-        label: 'Bash'
-    },
-    {
-        code: 'c',
-        label: 'C'
-    },
-    {
-        code: 'cpp',
-        label: 'C++'
-    },
-    {
-        code: 'cs',
-        label: 'C#'
-    },
-    {
-        code: 'lua',
-        label: 'Lua'
-    },
-    {
-        code: 'java',
-        label: 'Java'
-    },
-    {
-        code: 'json5',
-        label: 'JSON'
-    },
-    {
-        code: 'kt',
-        label: 'Kotlin'
-    },
-    {
-        code: 'markup',
-        label: 'html/xml'
-    },
-    {
-        code: 'php',
-        label: 'PHP'
-    },
-    {
-        code: 'plsql',
-        label: 'PL/SQL'
-    },
-    {
-        code: 'python',
-        label: 'Python'
-    },
-    {
-        code: 'powershell',
-        label: 'PowerShell'
-    },
-    {
-        code: 'rust',
-        label: 'Rust'
-    },
-    {
-        code: 'sql',
-        label: 'SQL'
-    },
-    {
-        code: 'ts',
-        label: 'Typescript'
-    },
-    {
-        code: 'yml',
-        label: 'YAML'
-    },
+  {
+    code: 'bash',
+    label: 'Bash'
+  },
+  {
+    code: 'c',
+    label: 'C'
+  },
+  {
+    code: 'cpp',
+    label: 'C++'
+  },
+  {
+    code: 'cs',
+    label: 'C#'
+  },
+  {
+    code: 'lua',
+    label: 'Lua'
+  },
+  {
+    code: 'java',
+    label: 'Java'
+  },
+  {
+    code: 'json5',
+    label: 'JSON'
+  },
+  {
+    code: 'kt',
+    label: 'Kotlin'
+  },
+  {
+    code: 'markup',
+    label: 'html/xml'
+  },
+  {
+    code: 'php',
+    label: 'PHP'
+  },
+  {
+    code: 'plsql',
+    label: 'PL/SQL'
+  },
+  {
+    code: 'python',
+    label: 'Python'
+  },
+  {
+    code: 'powershell',
+    label: 'PowerShell'
+  },
+  {
+    code: 'rust',
+    label: 'Rust'
+  },
+  {
+    code: 'sql',
+    label: 'SQL'
+  },
+  {
+    code: 'ts',
+    label: 'Typescript'
+  },
+  {
+    code: 'yml',
+    label: 'YAML'
+  },
 ];
 
 @Component({
-    selector: 'app-code-block-dialog',
-    templateUrl: './code-block-dialog.component.html',
-    styleUrl: './code-block-dialog.component.scss',
-    imports: [
-        MatFormFieldModule,
-        MatIcon,
-        MatInputModule,
-        MatRippleModule,
-        MatSelectModule,
-        MatTooltip,
-        ReactiveFormsModule,
-    ]
+  selector: 'app-code-block-dialog',
+  templateUrl: './code-block-dialog.component.html',
+  styleUrl: './code-block-dialog.component.scss',
+  imports: [
+    MatFormFieldModule,
+    MatIcon,
+    MatInputModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatTooltip,
+    ReactiveFormsModule,
+  ]
 })
 export class CodeBlockDialog {
-    private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
-    private formBuilder = inject(FormBuilder);
-    programmingLanguages = PROGRAMMING_LANGUAGES;
-    formGroup = this.formBuilder.group({
-        programmingLanguage: new FormControl('', Validators.required),
-        codeBlock: new FormControl('', Validators.required)
-    });
+  private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
+  private formBuilder = inject(FormBuilder);
+  programmingLanguages = PROGRAMMING_LANGUAGES;
+  formGroup = this.formBuilder.group({
+    programmingLanguage: new FormControl('', Validators.required),
+    codeBlock: new FormControl('', Validators.required)
+  });
 
-    closeAndValidate(): void {
-        if (this.formGroup.valid) {
-            this.dialogRef.close(this.formGroup.value);
-        }
+  closeAndValidate(): void {
+    if (this.formGroup.valid) {
+      this.dialogRef.close(this.formGroup.value);
     }
+  }
 
-    closeDialog(): void {
-        this.dialogRef.close();
-    }
-}
+  closeDialog(): void {
+    this.dialogRef.close();
+  }
+}