Replace @Output with output decorator in HistoryComponent

frontend/src/app/pages/features/map/map.component.html

@@ -1,7 +1,8 @@
 <ng-container>
   <app-header [current_page]="'map'"
               [background_image]="'public/img/backgrounds/map.jpg'"
-              [overlay_gradient]=0.65>
+              [overlay_gradient]=0.65
+              [height]="'100vh'">
     <div class="title" header-content>
       <h1>Dynamic Server Maps</h1>
       <h2>Which server would you like to see?</h2>

frontend/src/app/pages/forms/forms.component.html

@@ -1,8 +1,8 @@
 <ng-container>
-  <app-header [current_page]="currentPage" height="200px" background_image="/public/img/backgrounds/staff.png"
+  <app-header [current_page]="currentPage()" height="200px" background_image="/public/img/backgrounds/staff.png"
               [overlay_gradient]="0.5">
     <div class="title" header-content>
-      <h1>{{ formTitle }}</h1>
+      <h1>{{ formTitle() }}</h1>
     </div>
   </app-header>
   <main>

frontend/src/app/pages/forms/forms.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, input} from '@angular/core';
 import {HeaderComponent} from '@header/header.component';
 import {RouterLink} from '@angular/router';
 
@@ -12,6 +12,6 @@ import {RouterLink} from '@angular/router';
   styleUrl: './forms.component.scss'
 })
 export class FormsComponent {
-  @Input() formTitle: string = 'Form';
+  formTitle = input<string>('Form');
-  @Input() currentPage: string = 'forms';
+  currentPage = input<string>('forms');
 }

frontend/src/app/pages/header/header/header.component.html

@@ -1,6 +1,6 @@
 <ng-container>
   <header id="top"
-          [ngStyle]="{ 'background-image': getBackgroundImage(),'height': height, 'background-position': getBackgroundPosition() }">
+          [ngStyle]="{ 'background-image': getBackgroundImage(),'height': height(), 'background-position': getBackgroundPosition() }">
     <nav id="nav" [ngClass]="active">
       <div class="container">
         <div id="mobile_nav">

frontend/src/app/pages/header/header/header.component.ts

@@ -1,4 +1,4 @@
-import {Component, computed, HostListener, inject, Input, OnDestroy, Signal} from '@angular/core';
+import {Component, computed, HostListener, inject, input, OnDestroy, Signal} from '@angular/core';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {ThemeComponent} from '@shared-components/theme/theme.component';
 import {RouterLink} from '@angular/router';
@@ -25,10 +25,10 @@ export class HeaderComponent implements OnDestroy {
   private authService: AuthService = inject(AuthService)
   private dialog: MatDialog = inject(MatDialog)
 
-  @Input() current_page: string = '';
+  current_page = input.required<string>();
-  @Input() background_image: string = '';
+  background_image = input.required<string>();
-  @Input() height: string = '';
+  height = input.required<string>();
-  @Input() overlay_gradient: number = 0;
+  overlay_gradient = input.required<number>();
 
   public active: string = '';
   public inverseYPos: number = 0;
@@ -52,23 +52,23 @@ export class HeaderComponent implements OnDestroy {
   }
 
   public getBackgroundImage() {
-    if (this.overlay_gradient) {
+    if (this.overlay_gradient()) {
-      return `linear-gradient(rgba(0, 0, 0, ${this.overlay_gradient}), rgba(0, 0, 0, ${this.overlay_gradient})), url(${this.background_image})`;
+      return `linear-gradient(rgba(0, 0, 0, ${this.overlay_gradient()}), rgba(0, 0, 0, ${this.overlay_gradient()})), url(${this.background_image()})`;
     } else {
-      return `url(${this.background_image})`;
+      return `url(${this.background_image()})`;
     }
   }
 
 
   public getCurrentPageId(options: string[]) {
-    if (options.includes(this.current_page)) {
+    if (options.includes(this.current_page())) {
       return 'current_page'
     }
     return null;
   }
 
   public getBackgroundPosition() {
-    if (this.current_page === 'home') {
+    if (this.current_page() === 'home') {
       return 'center ' + this.inverseYPos + 'px'
     } else {
       return '';

frontend/src/app/pages/home/home.component.html

@@ -1,6 +1,9 @@
 <ng-container>
-  <app-header [current_page]="'home'" height="100vh"
+  <app-header [current_page]="'home'"
-              [background_image]="'/public/img/backgrounds/120spawn-min.png'">
+              [height]="'100vh'"
+              [background_image]="'/public/img/backgrounds/120spawn-min.png'"
+              [overlay_gradient]="0"
+  >
     <div class="title" header-content>
       <h1 style="display: none;">Altitude</h1>
       <img id="header-img" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"

frontend/src/app/pages/reference/bans/history/history.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, inject, Input, OnChanges, OnInit, Output} from '@angular/core';
+import {Component, inject, input, OnChanges, OnInit, output} from '@angular/core';
 import {HistoryService, PunishmentHistory} from '@api';
 import {catchError, map, Observable, shareReplay} from 'rxjs';
 import {NgOptimizedImage} from '@angular/common';
@@ -28,13 +28,13 @@ import {MatIconModule} from '@angular/material/icon';
 })
 export class HistoryComponent implements OnInit, OnChanges {
 
-  @Input() userType: 'player' | 'staff' = "player";
+  userType = input<'player' | 'staff'>("player");
-  @Input() punishmentType: 'all' | 'ban' | 'mute' | 'kick' | 'warn' = "all";
+  punishmentType = input<'all' | 'ban' | 'mute' | 'kick' | 'warn'>("all");
-  @Input() page: number = 0;
+  page = input<number>(0);
-  @Input() searchTerm: string = '';
+  searchTerm = input<string>('');
 
-  @Output() pageChange = new EventEmitter<number>();
+  pageChange = output<number>();
-  @Output() selectItem = new EventEmitter<SearchParams>();
+  selectItem = output<SearchParams>();
 
   private uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
 
@@ -56,13 +56,13 @@ export class HistoryComponent implements OnInit, OnChanges {
 
   private reloadHistory(): void {
     let historyObservable: Observable<PunishmentHistory[]>;
-    if (this.searchTerm.length === 0) {
+    if (this.searchTerm().length === 0) {
-      historyObservable = this.historyApi.getHistoryForAll(this.userType, this.punishmentType, this.page);
+      historyObservable = this.historyApi.getHistoryForAll(this.userType(), this.punishmentType(), this.page());
     } else {
-      if (this.uuidRegex.test(this.searchTerm)) {
+      if (this.uuidRegex.test(this.searchTerm())) {
-        historyObservable = this.historyApi.getHistoryForUuid(this.userType, this.punishmentType, this.searchTerm, this.page);
+        historyObservable = this.historyApi.getHistoryForUuid(this.userType(), this.punishmentType(), this.searchTerm(), this.page());
       } else {
-        historyObservable = this.historyApi.getHistoryForUsers(this.userType, this.punishmentType, this.searchTerm, this.page);
+        historyObservable = this.historyApi.getHistoryForUsers(this.userType(), this.punishmentType(), this.searchTerm(), this.page());
       }
     }
     historyObservable.pipe(