Update to Angular 19 (#1)

Reviewed-on: #1

src/app/editor/editor.component.ts

@@ -8,6 +8,7 @@ import {
   input,
   signal,
   viewChild,
+  inject,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -29,7 +30,6 @@ type PreviewType = 'raw' | 'edit' | 'diff';
 
 @Component({
   selector: 'app-editor',
-  standalone: true,
   imports: [
     CommonModule,
     ProtoFieldComponent,
@@ -43,6 +43,8 @@ type PreviewType = 'raw' | 'edit' | 'diff';
   styleUrl: './editor.component.scss',
 })
 export class EditorComponent {
+  private snackBar = inject(MatSnackBar);
+
   selectedFile = input<FileOrFolder>();
   selectedMessage = input.required<ProtoMessage>();
   indentSize = input<number>(2);
@@ -80,7 +82,9 @@ export class EditorComponent {
 
   private code = viewChild<ElementRef<HTMLElement>>('code');
 
-  constructor(sanitizer: DomSanitizer, private snackBar: MatSnackBar) {
+  constructor() {
+    const sanitizer = inject(DomSanitizer);
+
     effect(() => {
       const element = this.code()?.nativeElement;
       if (element) {

src/app/editor/list-field/list-field.component.ts

@@ -14,15 +14,14 @@ import { ListMessage } from '../../model/proto-message.model';
 import { ProtoFieldComponent } from '../proto-field/proto-field.component';
 
 @Component({
-  selector: 'app-list-field',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    MatIconModule,
-    forwardRef(() => ProtoFieldComponent),
-  ],
-  template: `<h3>{{ label() }}</h3>
+    selector: 'app-list-field',
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatIconModule,
+        forwardRef(() => ProtoFieldComponent),
+    ],
+    template: `<h3>{{ label() }}</h3>
     @if(values()) { @for(value of values(); track $index) {
     <div class="row-wrapper">
       <app-proto-field
@@ -38,8 +37,8 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
     <button mat-icon-button class="add-button" (click)="add()">
       <mat-icon>add</mat-icon>
     </button>`,
-  styleUrl: './list-field.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    styleUrl: './list-field.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ListFieldComponent {
   label = input<string>();

src/app/editor/map-field/map-field.component.ts

@@ -16,15 +16,14 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
 const keyIsEmpty = (key: string | number) => key == null || key === '';
 
 @Component({
-  selector: 'app-map-field',
-  standalone: true,
-  imports: [
-    CommonModule,
-    forwardRef(() => ProtoFieldComponent),
-    MatIconModule,
-    MatButtonModule,
-  ],
-  template: `<h3>{{ label() }}</h3>
+    selector: 'app-map-field',
+    imports: [
+        CommonModule,
+        forwardRef(() => ProtoFieldComponent),
+        MatIconModule,
+        MatButtonModule,
+    ],
+    template: `<h3>{{ label() }}</h3>
     @if(valuePairs()) { @for(value of valuePairs(); track $index) {
     <div class="row-wrapper">
       <app-proto-field
@@ -45,8 +44,8 @@ const keyIsEmpty = (key: string | number) => key == null || key === '';
     <button mat-icon-button class="add-button" (click)="add()">
       <mat-icon>add</mat-icon>
     </button>`,
-  styleUrl: './map-field.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    styleUrl: './map-field.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MapFieldComponent {
   label = input<string>();

src/app/editor/object-field/object-field.component.ts

@@ -11,10 +11,9 @@ import { ObjectMessage } from '../../model/proto-message.model';
 import { ProtoFieldComponent } from '../proto-field/proto-field.component';
 
 @Component({
-  selector: 'app-object-field',
-  standalone: true,
-  imports: [CommonModule, forwardRef(() => ProtoFieldComponent)],
-  template: `<h3>
+    selector: 'app-object-field',
+    imports: [CommonModule, forwardRef(() => ProtoFieldComponent)],
+    template: `<h3>
       {{ label() }} ({{ configuration().messageDefinition.name }})
     </h3>
     <div>
@@ -27,8 +26,8 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
       ></app-proto-field>
       }
     </div>`,
-  styleUrl: './object-field.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    styleUrl: './object-field.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ObjectFieldComponent {
   label = input<string>();

src/app/editor/proto-field/proto-field.component.ts

@@ -27,21 +27,20 @@ import { ObjectFieldComponent } from '../object-field/object-field.component';
 import { StringFieldComponent } from '../string-field/string-field.component';
 
 @Component({
-  selector: 'app-proto-field',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    ListFieldComponent,
-    MapFieldComponent,
-    MatCheckboxModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    MatInputModule,
-    ObjectFieldComponent,
-    StringFieldComponent,
-  ],
-  template: `@switch (configuration().type) { @case (MessageTypeEnum.String) {
+    selector: 'app-proto-field',
+    imports: [
+        CommonModule,
+        FormsModule,
+        ListFieldComponent,
+        MapFieldComponent,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatInputModule,
+        ObjectFieldComponent,
+        StringFieldComponent,
+    ],
+    template: `@switch (configuration().type) { @case (MessageTypeEnum.String) {
     <app-string-field
       [label]="label()"
       [configuration]="stringConfiguration()"
@@ -101,8 +100,8 @@ import { StringFieldComponent } from '../string-field/string-field.component';
       [configuration]="objectConfiguration()"
     ></app-object-field>
     } @case (MessageTypeEnum.Raw) {}}`,
-  styleUrl: './proto-field.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    styleUrl: './proto-field.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProtoFieldComponent {
   label = input<string>();

src/app/editor/string-field/string-field.component.ts

@@ -12,16 +12,15 @@ import { MatInputModule } from '@angular/material/input';
 import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 
 @Component({
-  selector: 'app-string-field',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MonacoEditorModule,
-  ],
-  template: ` @if(configuration().textType === 'text') {
+    selector: 'app-string-field',
+    imports: [
+        CommonModule,
+        FormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MonacoEditorModule,
+    ],
+    template: ` @if(configuration().textType === 'text') {
     <mat-form-field>
       <mat-label>{{ label() }}</mat-label>
       <input
@@ -44,8 +43,8 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
       [options]="editorOptions"
     ></ngx-monaco-editor>
     }`,
-  styleUrl: './string-field.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    styleUrl: './string-field.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StringFieldComponent {
   label = input();