Adding change detection

src/app/admin/models/option-changed.ts

@@ -0,0 +1,6 @@
+export interface OptionChanged
+{
+	slug: string;
+	oldValue: string;
+	newValue: string;
+}

src/app/admin/option/option.component.html

@@ -1,7 +1,7 @@
 <form>
 	<mat-form-field class="w-100 mb-2">
 		<mat-label>{{option.name}}</mat-label>
-		<input #input matInput value="{{value}}">
+		<input #input matInput value="{{value}}" (input)="onValueChanged()">
 		<mat-hint align="start">{{option.description}}</mat-hint>
 	</mat-form-field>
 </form>

src/app/admin/option/option.component.ts

@@ -1,22 +1,20 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from "@angular/core";
+import { Component, ElementRef, Input, OnInit, Output, ViewChild, EventEmitter } from "@angular/core";
 import { Option } from "../models/option";
-import { HttpClient } from "@angular/common/http";
+import { OptionChanged } from "../models/option-changed";
 
 @Component({
 	selector: "app-option",
 	templateUrl: "./option.component.html",
 	styleUrls: ["./option.component.scss"]
 })
-export class OptionComponent implements OnInit, OnDestroy
+export class OptionComponent implements OnInit
 {
 	value: string;
 	@Input() option: Option;
 	@Input() config;
+	@Output() changed = new EventEmitter<OptionChanged>();
 	@ViewChild("input") input: ElementRef<HTMLInputElement>;
 
-	constructor(private http: HttpClient)
-	{}
-
 	ngOnInit(): void
 	{
 		this.value = this.getConfig(this.option.slug);
@@ -24,8 +22,8 @@ export class OptionComponent implements OnInit, OnDestroy
 
 	getConfig(slug: string): string
 	{
-		const sections = slug.split(':');
-		let conf = this.config;
+		const sections: string[] = slug.split(":");
+		let conf: any = this.config;
 
 		for (const child of sections)
 		{
@@ -35,10 +33,13 @@ export class OptionComponent implements OnInit, OnDestroy
 		}
 		return conf;
 	}
-	async ngOnDestroy()
+
+	onValueChanged(): void
 	{
-		if (this.value == this.input.nativeElement.value)
-			return;
-		await this.http.put(`/api/config/${this.option.slug}`, this.input.nativeElement.value);
+		this.changed.emit({
+			slug: this.option.slug,
+			oldValue: this.value,
+			newValue: this.input.nativeElement.value
+		});
 	}
 }

src/app/admin/panel/panel.component.html

@@ -8,10 +8,11 @@
 			<button mat-icon-button aria-label="Save changes" matTooltip="Save changes">
 				<mat-icon>save</mat-icon>
 			</button>
-			<span>{{getChanges()}} changes</span>
+			<span>{{changed.size}} changes</span>
 		</mat-toolbar>
 		<div>
-			<app-section *ngFor="let item of this.items" [section]="item" [config]="config"></app-section>
+			<app-section *ngFor="let item of this.items" [section]="item" [config]="config" (changed)="onOptionChanged($event)">
+			</app-section>
 		</div>
 	</mat-sidenav-content>
 

src/app/admin/panel/panel.component.ts

@@ -1,6 +1,8 @@
 import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { ConfigurationSection } from "../models/configuration-section";
+import { OptionChanged } from "../models/option-changed";
+import { HttpClient } from "@angular/common/http";
 
 @Component({
 	selector: "app-panel",
@@ -11,8 +13,10 @@ export class PanelComponent
 {
 	items: ConfigurationSection[];
 	config: any;
+	changed = new Map<string, string>();
 
-	constructor(private route: ActivatedRoute)
+	constructor(private route: ActivatedRoute,
+	            private http: HttpClient)
 	{
 		this.route.data.subscribe(x =>
 		{
@@ -21,8 +25,17 @@ export class PanelComponent
 		});
 	}
 
-	getChanges(): number
+	onOptionChanged(event: OptionChanged): void
 	{
-		return 0;
+		if (event.newValue === event.oldValue)
+			this.changed.delete(event.slug);
+		else
+			this.changed.set(event.slug, event.newValue);
+	}
+
+	onSave(): void
+	{
+		this.http.put("/api/config", this.changed)
+			.subscribe();
 	}
 }

src/app/admin/section/section.component.html

@@ -1,4 +1,6 @@
 <h3>{{section.name}}</h3>
 
-<app-option *ngFor="let option of section.options" [option]="option" [config]="config"></app-option>
+<app-option *ngFor="let option of section.options" [option]="option" [config]="config"
+			(changed)="this.changed.emit($event)">
+</app-option>
 <br/>

src/app/admin/section/section.component.ts

@@ -1,5 +1,6 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, Output, EventEmitter } from "@angular/core";
 import { ConfigurationSection } from "../models/configuration-section";
+import { OptionChanged } from "../models/option-changed";
 
 @Component({
 	selector: "app-section",
@@ -10,4 +11,5 @@ export class SectionComponent
 {
 	@Input() section: ConfigurationSection;
 	@Input() config: any;
+	@Output() changed = new EventEmitter<OptionChanged>();
 }