Update to Angular v17 syntax

src-angular/app/app.component.html

@@ -1,4 +1,6 @@
-<div *ngIf="settingsLoaded" class="flex flex-col h-screen">
+@if (settingsLoaded) {
+	<div class="flex flex-col h-screen">
 		<app-toolbar></app-toolbar>
 		<router-outlet></router-outlet>
-</div>
+	</div>
+}

src-angular/app/app.module.ts

@@ -16,7 +16,6 @@ import { DownloadsModalComponent } from './components/browse/status-bar/download
 import { StatusBarComponent } from './components/browse/status-bar/status-bar.component'
 import { SettingsComponent } from './components/settings/settings.component'
 import { ToolbarComponent } from './components/toolbar/toolbar.component'
-import { CheckboxDirective } from './core/directives/checkbox.directive'
 import { RemoveStyleTagsPipe } from './core/pipes/remove-style-tags.pipe'
 
 @NgModule({
@@ -32,7 +31,6 @@ import { RemoveStyleTagsPipe } from './core/pipes/remove-style-tags.pipe'
 		ChartSidebarMenutComponent,
 		ResultTableRowComponent,
 		DownloadsModalComponent,
-		CheckboxDirective,
 		RemoveStyleTagsPipe,
 		SettingsComponent,
 	],

src-angular/app/components/browse/chart-sidebar/chart-sidebar-menu/chart-sidebar-menu.component.html

@@ -113,10 +113,11 @@
 									<ul>
 										@for (breadcrumb of getVersionBreadcrumbs(version); track $index) {
 											<li>
-												<ng-container *ngIf="breadcrumb.link">
+												@if (breadcrumb.link) {
 													<a (click)="openUrl(breadcrumb.link)" class="link link-hover">{{ breadcrumb.name }}</a>
-												</ng-container>
+												} @else {
-												<ng-container *ngIf="!breadcrumb.link">{{ breadcrumb.name }}</ng-container>
+													{{ breadcrumb.name }}
+												}
 											</li>
 										}
 									</ul>

src-angular/app/components/browse/chart-sidebar/chart-sidebar.component.html

@@ -1,4 +1,5 @@
-<div class="flex h-full flex-col" *ngIf="selectedChart">
+@if (selectedChart) {
+	<div class="flex h-full flex-col">
 		<div class="relative">
 			@if (albumArtMd5) {
 				@if (hasIcons && icon) {
@@ -131,4 +132,5 @@
 				<app-chart-sidebar-menu [chartVersions]="charts![0]" (selectedVersionChanges)="selectedChart = $event" />
 			</div>
 		</div>
-</div>
+	</div>
+}

src-angular/app/components/browse/result-table/result-table.component.ts

@@ -1,10 +1,9 @@
-import { Component, EventEmitter, HostBinding, OnInit, Output, QueryList, ViewChild, ViewChildren } from '@angular/core'
+import { Component, EventEmitter, HostBinding, OnInit, Output, QueryList, ViewChildren } from '@angular/core'
 
 import { sortBy } from 'lodash'
 import { SettingsService } from 'src-angular/app/core/services/settings.service'
 import { ChartData } from 'src-shared/interfaces/search.interface'
 
-import { CheckboxDirective } from '../../../core/directives/checkbox.directive'
 import { SearchService } from '../../../core/services/search.service'
 import { SelectionService } from '../../../core/services/selection.service'
 import { ResultTableRowComponent } from './result-table-row/result-table-row.component'
@@ -18,7 +17,6 @@ export class ResultTableComponent implements OnInit {
 
 	@Output() rowClicked = new EventEmitter<ChartData[]>()
 
-	@ViewChild(CheckboxDirective, { static: true }) checkboxColumn: CheckboxDirective
 	@ViewChildren('tableRow') tableRows: QueryList<ResultTableRowComponent>
 
 	activeSong: ChartData[] | null = null

src-angular/app/components/browse/status-bar/downloads-modal/downloads-modal.component.html

@@ -1,6 +1,6 @@
 <div class="flex flex-col gap-4 min-h-0">
 	<div
-		class="flex flex-col gap-1 p-1 overflow-y-auto max-h-[75vh] scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-thumb-neutral scrollbar-thumb-rounded-full">
+		class="flex flex-col gap-2 p-1 overflow-y-auto max-h-[75vh] scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-thumb-neutral scrollbar-thumb-rounded-full">
 		@for (download of downloadService.downloads; track download.md5) {
 			<div
 				class="card bg-neutral text-neutral-content shadow-xl"
@@ -46,16 +46,6 @@
 					</div>
 				</div>
 			</div>
-			<div id="downloadTitle">
-				<span style="flex-grow: 1"></span>
-				<i class="inside right close icon" (click)="downloadService.cancelDownload(download.md5)"></i>
-			</div>
-			<div id="downloadText">
-				<span style="flex-grow: 1"></span>
-				<span *ngIf="!download.isPath" class="description"></span>
-				<span *ngIf="download.isPath" class="description"> </span>
-			</div>
-			<div id="downloadProgressDiv"></div>
 		}
 	</div>
 	<div *ngIf="downloadService.completedCount > 1" class="flex justify-end">

src-angular/app/components/settings/settings.component.html

@@ -10,9 +10,9 @@
 				readonly
 				type="text"
 				placeholder="No directory selected!" />
-			<button *ngIf="settingsService.libraryDirectory !== undefined" (click)="openLibraryDirectory()" class="join-item btn btn-neutral">
+			@if (settingsService.libraryDirectory !== undefined) {
-				Open Folder
+				<button (click)="openLibraryDirectory()" class="join-item btn btn-neutral">Open Folder</button>
-			</button>
+			}
 			<button (click)="getLibraryDirectory()" class="join-item btn btn-primary">Choose</button>
 		</div>
 	</label>

src-angular/app/core/directives/checkbox.directive.ts

@@ -1,39 +0,0 @@
-import { Directive, ElementRef, EventEmitter, Output } from '@angular/core'
-
-@Directive({
-	selector: '[appCheckbox]',
-})
-export class CheckboxDirective {
-	@Output() checked = new EventEmitter<boolean>()
-
-	_isChecked = false
-
-	constructor(private checkbox: ElementRef) { }
-
-	// ngAfterViewInit() {
-	// TODO
-	// $(this.checkbox.nativeElement).checkbox({
-	// 	onChecked: () => {
-	// 		this.checked.emit(true)
-	// 		this._isChecked = true
-	// 	},
-	// 	onUnchecked: () => {
-	// 		this.checked.emit(false)
-	// 		this._isChecked = false
-	// 	},
-	// })
-	// }
-
-	check(isChecked: boolean) {
-		this._isChecked = isChecked
-		if (isChecked) {
-			this.checkbox.nativeElement.checked = true
-		} else {
-			this.checkbox.nativeElement.checked = false
-		}
-	}
-
-	get isChecked() {
-		return this._isChecked
-	}
-}