diff --git a/ui/src/app/edge/history/Controller/Ess/TimeOfUseTariff/chart/chart.ts b/ui/src/app/edge/history/Controller/Ess/TimeOfUseTariff/chart/chart.ts
index 84ad2eb878e..aeceaec2560 100644
--- a/ui/src/app/edge/history/Controller/Ess/TimeOfUseTariff/chart/chart.ts
+++ b/ui/src/app/edge/history/Controller/Ess/TimeOfUseTariff/chart/chart.ts
@@ -13,7 +13,7 @@ import { ColorUtils } from 'src/app/shared/utils/color/color.utils';
 })
 export class ChartComponent extends AbstractHistoryChart {
 
-    @Input() public override component: EdgeConfig.Component;
+    @Input({ required: true }) public override component!: EdgeConfig.Component;
 
     private currencyLabel: Currency.Label; // Default
 
diff --git a/ui/src/app/edge/history/Controller/Ess/TimeOfUseTariff/flat/flat.ts b/ui/src/app/edge/history/Controller/Ess/TimeOfUseTariff/flat/flat.ts
index eeb4fb4fab2..de855a23302 100644
--- a/ui/src/app/edge/history/Controller/Ess/TimeOfUseTariff/flat/flat.ts
+++ b/ui/src/app/edge/history/Controller/Ess/TimeOfUseTariff/flat/flat.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Component, Input } from '@angular/core';
 
 import { AbstractFlatWidget } from 'src/app/shared/genericComponents/flat/abstract-flat-widget';
@@ -11,7 +10,7 @@ import { ChannelAddress, CurrentData } from 'src/app/shared/shared';
 })
 export class FlatComponent extends AbstractFlatWidget {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
 
     protected delayedActiveTimeOverPeriod: number | null = null;
     protected chargedConsumptionActiveTimeOverPeriod: number | null = null;
diff --git a/ui/src/app/edge/history/chpsoc/chart.component.ts b/ui/src/app/edge/history/chpsoc/chart.component.ts
index aa37afaee2f..5a5a82d43ec 100644
--- a/ui/src/app/edge/history/chpsoc/chart.component.ts
+++ b/ui/src/app/edge/history/chpsoc/chart.component.ts
@@ -14,8 +14,8 @@ import { YAxisTitle } from 'src/app/shared/service/utils';
 })
 export class ChpSocChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     ngOnChanges() {
         this.updateChart();
diff --git a/ui/src/app/edge/history/chpsoc/widget.component.ts b/ui/src/app/edge/history/chpsoc/widget.component.ts
index 090b3ed1da8..78c42a533c8 100644
--- a/ui/src/app/edge/history/chpsoc/widget.component.ts
+++ b/ui/src/app/edge/history/chpsoc/widget.component.ts
@@ -14,8 +14,8 @@ import { calculateActiveTimeOverPeriod } from '../shared';
 })
 export class ChpSocWidgetComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     private static readonly SELECTOR = "chpsocWidget";
 
diff --git a/ui/src/app/edge/history/delayedselltogrid/chart.component.ts b/ui/src/app/edge/history/delayedselltogrid/chart.component.ts
index e51dd2b147c..a1dd843c2b2 100644
--- a/ui/src/app/edge/history/delayedselltogrid/chart.component.ts
+++ b/ui/src/app/edge/history/delayedselltogrid/chart.component.ts
@@ -14,8 +14,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class DelayedSellToGridChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     ngOnChanges() {
         this.updateChart();
diff --git a/ui/src/app/edge/history/delayedselltogrid/widget.component.ts b/ui/src/app/edge/history/delayedselltogrid/widget.component.ts
index 3b4e3442ca5..85480c54c97 100644
--- a/ui/src/app/edge/history/delayedselltogrid/widget.component.ts
+++ b/ui/src/app/edge/history/delayedselltogrid/widget.component.ts
@@ -10,8 +10,8 @@ import { Edge, Service, EdgeConfig } from 'src/app/shared/shared';
 })
 export class DelayedSellToGridWidgetComponent implements OnInit {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     private static readonly SELECTOR = "delayedSellToGridWidget";
 
diff --git a/ui/src/app/edge/history/fixdigitaloutput/singlechart.component.ts b/ui/src/app/edge/history/fixdigitaloutput/singlechart.component.ts
index 7dba882fa89..e86032d5ff7 100644
--- a/ui/src/app/edge/history/fixdigitaloutput/singlechart.component.ts
+++ b/ui/src/app/edge/history/fixdigitaloutput/singlechart.component.ts
@@ -16,8 +16,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class FixDigitalOutputSingleChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-  @Input() public period: DefaultTypes.HistoryPeriod;
-  @Input() public componentId: string;
+  @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+  @Input({ required: true }) public componentId!: string;
 
   ngOnChanges() {
     this.updateChart();
diff --git a/ui/src/app/edge/history/fixdigitaloutput/totalchart.component.ts b/ui/src/app/edge/history/fixdigitaloutput/totalchart.component.ts
index ede98a6e38b..c43325a0c39 100644
--- a/ui/src/app/edge/history/fixdigitaloutput/totalchart.component.ts
+++ b/ui/src/app/edge/history/fixdigitaloutput/totalchart.component.ts
@@ -15,7 +15,7 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class FixDigitalOutputTotalChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-  @Input() public period: DefaultTypes.HistoryPeriod;
+  @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
 
   ngOnChanges() {
     this.updateChart();
diff --git a/ui/src/app/edge/history/fixdigitaloutput/widget.component.ts b/ui/src/app/edge/history/fixdigitaloutput/widget.component.ts
index f4990c751fb..b640b941b56 100644
--- a/ui/src/app/edge/history/fixdigitaloutput/widget.component.ts
+++ b/ui/src/app/edge/history/fixdigitaloutput/widget.component.ts
@@ -14,8 +14,8 @@ import { calculateActiveTimeOverPeriod } from '../shared';
 })
 export class FixDigitalOutputWidgetComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
     private config: EdgeConfig = null;
     public component: EdgeConfig.Component = null;
 
diff --git a/ui/src/app/edge/history/grid/chart.component.ts b/ui/src/app/edge/history/grid/chart.component.ts
index 285c8d4961e..76758432d1c 100644
--- a/ui/src/app/edge/history/grid/chart.component.ts
+++ b/ui/src/app/edge/history/grid/chart.component.ts
@@ -15,8 +15,8 @@ import * as Chart from 'chart.js';
 })
 export class GridChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public showPhases: boolean;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public showPhases!: boolean;
 
     ngOnChanges() {
         this.updateChart();
diff --git a/ui/src/app/edge/history/gridoptimizedcharge/chart.component.ts b/ui/src/app/edge/history/gridoptimizedcharge/chart.component.ts
index 828617a2266..11523c2d1a1 100644
--- a/ui/src/app/edge/history/gridoptimizedcharge/chart.component.ts
+++ b/ui/src/app/edge/history/gridoptimizedcharge/chart.component.ts
@@ -16,8 +16,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class GridOptimizedChargeChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-  @Input() public period: DefaultTypes.HistoryPeriod;
-  @Input() public component: EdgeConfig.Component;
+  @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+  @Input({ required: true }) public component!: EdgeConfig.Component;
 
   ngOnChanges() {
     this.updateChart();
diff --git a/ui/src/app/edge/history/gridoptimizedcharge/sellToGridLimitChart.component.ts b/ui/src/app/edge/history/gridoptimizedcharge/sellToGridLimitChart.component.ts
index 0c556547ae4..6f65d69c923 100644
--- a/ui/src/app/edge/history/gridoptimizedcharge/sellToGridLimitChart.component.ts
+++ b/ui/src/app/edge/history/gridoptimizedcharge/sellToGridLimitChart.component.ts
@@ -14,8 +14,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class SellToGridLimitChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-  @Input() public period: DefaultTypes.HistoryPeriod;
-  @Input() public component: EdgeConfig.Component;
+  @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+  @Input({ required: true }) public component!: EdgeConfig.Component;
 
   private gridMeter: string;
 
diff --git a/ui/src/app/edge/history/gridoptimizedcharge/widget.component.ts b/ui/src/app/edge/history/gridoptimizedcharge/widget.component.ts
index fd5361b5b33..5b0d61878a5 100644
--- a/ui/src/app/edge/history/gridoptimizedcharge/widget.component.ts
+++ b/ui/src/app/edge/history/gridoptimizedcharge/widget.component.ts
@@ -12,8 +12,8 @@ import { AbstractHistoryWidget } from '../abstracthistorywidget';
 })
 export class GridOptimizedChargeWidgetComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     private static readonly SELECTOR = "gridOptimizedChargeWidget";
 
diff --git a/ui/src/app/edge/history/heatingelement/chart.component.ts b/ui/src/app/edge/history/heatingelement/chart.component.ts
index d2647126584..1835620d460 100644
--- a/ui/src/app/edge/history/heatingelement/chart.component.ts
+++ b/ui/src/app/edge/history/heatingelement/chart.component.ts
@@ -17,8 +17,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class HeatingelementChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-  @Input() public period: DefaultTypes.HistoryPeriod;
-  @Input() public component: EdgeConfig.Component;
+  @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+  @Input({ required: true }) public component!: EdgeConfig.Component;
 
   ngOnChanges() {
     this.updateChart();
diff --git a/ui/src/app/edge/history/heatingelement/widget.component.ts b/ui/src/app/edge/history/heatingelement/widget.component.ts
index 54c59de124b..1bdd6ae51cb 100644
--- a/ui/src/app/edge/history/heatingelement/widget.component.ts
+++ b/ui/src/app/edge/history/heatingelement/widget.component.ts
@@ -13,8 +13,8 @@ import { AbstractHistoryWidget } from '../abstracthistorywidget';
 })
 export class HeatingelementWidgetComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     private static readonly SELECTOR = "heatingelementWidget";
 
diff --git a/ui/src/app/edge/history/heatpump/chart.component.ts b/ui/src/app/edge/history/heatpump/chart.component.ts
index a026c2e3d71..42e87f0c482 100644
--- a/ui/src/app/edge/history/heatpump/chart.component.ts
+++ b/ui/src/app/edge/history/heatpump/chart.component.ts
@@ -15,8 +15,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class HeatPumpChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public component: EdgeConfig.Component;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public component!: EdgeConfig.Component;
 
     ngOnChanges() {
         this.updateChart();
diff --git a/ui/src/app/edge/history/heatpump/widget.component.ts b/ui/src/app/edge/history/heatpump/widget.component.ts
index 14ef01243f7..8bc60b9106c 100644
--- a/ui/src/app/edge/history/heatpump/widget.component.ts
+++ b/ui/src/app/edge/history/heatpump/widget.component.ts
@@ -13,8 +13,8 @@ import { AbstractHistoryWidget } from '../abstracthistorywidget';
 })
 export class HeatpumpWidgetComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     private static readonly SELECTOR = "heatpumpWidget";
 
diff --git a/ui/src/app/edge/history/peakshaving/asymmetric/chart.component.ts b/ui/src/app/edge/history/peakshaving/asymmetric/chart.component.ts
index 158d68ca676..8cbe32085b3 100644
--- a/ui/src/app/edge/history/peakshaving/asymmetric/chart.component.ts
+++ b/ui/src/app/edge/history/peakshaving/asymmetric/chart.component.ts
@@ -14,8 +14,8 @@ import { AbstractHistoryChart } from '../../abstracthistorychart';
 })
 export class AsymmetricPeakshavingChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public component: EdgeConfig.Component;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public component!: EdgeConfig.Component;
 
     ngOnChanges() {
         this.updateChart();
diff --git a/ui/src/app/edge/history/peakshaving/asymmetric/widget.component.ts b/ui/src/app/edge/history/peakshaving/asymmetric/widget.component.ts
index daf215d6681..5a5f8cfaa6f 100644
--- a/ui/src/app/edge/history/peakshaving/asymmetric/widget.component.ts
+++ b/ui/src/app/edge/history/peakshaving/asymmetric/widget.component.ts
@@ -10,8 +10,8 @@ import { Edge, Service, EdgeConfig } from 'src/app/shared/shared';
 })
 export class AsymmetricPeakshavingWidgetComponent implements OnInit {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     private static readonly SELECTOR = "asymmetricPeakshavingWidget";
 
diff --git a/ui/src/app/edge/history/peakshaving/symmetric/chart.component.ts b/ui/src/app/edge/history/peakshaving/symmetric/chart.component.ts
index 8cd625e16b9..a7a103273ab 100644
--- a/ui/src/app/edge/history/peakshaving/symmetric/chart.component.ts
+++ b/ui/src/app/edge/history/peakshaving/symmetric/chart.component.ts
@@ -13,8 +13,8 @@ import { AbstractHistoryChart } from '../../abstracthistorychart';
 })
 export class SymmetricPeakshavingChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     ngOnChanges() {
         this.updateChart();
diff --git a/ui/src/app/edge/history/peakshaving/symmetric/widget.component.ts b/ui/src/app/edge/history/peakshaving/symmetric/widget.component.ts
index 179d46e5e31..0f8a8392aa8 100644
--- a/ui/src/app/edge/history/peakshaving/symmetric/widget.component.ts
+++ b/ui/src/app/edge/history/peakshaving/symmetric/widget.component.ts
@@ -10,8 +10,8 @@ import { Edge, EdgeConfig, Service } from 'src/app/shared/shared';
 })
 export class SymmetricPeakshavingWidgetComponent implements OnInit {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     private static readonly SELECTOR = "symmetricPeakshavingWidget";
 
diff --git a/ui/src/app/edge/history/peakshaving/timeslot/chart.component.ts b/ui/src/app/edge/history/peakshaving/timeslot/chart.component.ts
index 1e65baae7f0..05ac5a3a27f 100644
--- a/ui/src/app/edge/history/peakshaving/timeslot/chart.component.ts
+++ b/ui/src/app/edge/history/peakshaving/timeslot/chart.component.ts
@@ -14,8 +14,8 @@ import { AbstractHistoryChart } from '../../abstracthistorychart';
 })
 export class TimeslotPeakshavingChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     ngOnChanges() {
         this.updateChart();
diff --git a/ui/src/app/edge/history/peakshaving/timeslot/widget.component.ts b/ui/src/app/edge/history/peakshaving/timeslot/widget.component.ts
index ab34310c2a0..39b3fe686cb 100644
--- a/ui/src/app/edge/history/peakshaving/timeslot/widget.component.ts
+++ b/ui/src/app/edge/history/peakshaving/timeslot/widget.component.ts
@@ -10,8 +10,8 @@ import { Edge, EdgeConfig, Service } from 'src/app/shared/shared';
 })
 export class TimeslotPeakshavingWidgetComponent implements OnInit {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     private static readonly SELECTOR = "timeslotPeakshavingWidget";
 
diff --git a/ui/src/app/edge/history/singlethreshold/chart.component.ts b/ui/src/app/edge/history/singlethreshold/chart.component.ts
index 41371fa0bc4..240c429afd4 100644
--- a/ui/src/app/edge/history/singlethreshold/chart.component.ts
+++ b/ui/src/app/edge/history/singlethreshold/chart.component.ts
@@ -17,9 +17,9 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class SinglethresholdChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-  @Input() public period: DefaultTypes.HistoryPeriod;
-  @Input() public componentId: string;
-  @Input() public inputChannelUnit: string;
+  @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+  @Input({ required: true }) public componentId!: string;
+  @Input({ required: true }) public inputChannelUnit!: string;
 
   ngOnChanges() {
     this.updateChart();
diff --git a/ui/src/app/edge/history/singlethreshold/widget.component.ts b/ui/src/app/edge/history/singlethreshold/widget.component.ts
index 5af56a066b8..d8c1dce7e06 100644
--- a/ui/src/app/edge/history/singlethreshold/widget.component.ts
+++ b/ui/src/app/edge/history/singlethreshold/widget.component.ts
@@ -14,8 +14,8 @@ import { calculateActiveTimeOverPeriod } from '../shared';
 })
 export class SinglethresholdWidgetComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     private static readonly SELECTOR = "singlethresholdWidget";
 
diff --git a/ui/src/app/edge/history/storage/chargerchart.component.ts b/ui/src/app/edge/history/storage/chargerchart.component.ts
index 354e37e2aec..093f68da279 100644
--- a/ui/src/app/edge/history/storage/chargerchart.component.ts
+++ b/ui/src/app/edge/history/storage/chargerchart.component.ts
@@ -13,8 +13,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class StorageChargerChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
 
     private moreThanOneProducer: boolean = null;
 
diff --git a/ui/src/app/edge/history/storage/esschart.component.ts b/ui/src/app/edge/history/storage/esschart.component.ts
index 507377c51dd..10f63f0715a 100644
--- a/ui/src/app/edge/history/storage/esschart.component.ts
+++ b/ui/src/app/edge/history/storage/esschart.component.ts
@@ -14,9 +14,9 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 export class StorageESSChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public componentId: string;
-    @Input() public showPhases: boolean;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public componentId!: string;
+    @Input({ required: true }) public showPhases!: boolean;
 
     private moreThanOneProducer: boolean = null;
 
diff --git a/ui/src/app/edge/history/storage/singlechart.component.ts b/ui/src/app/edge/history/storage/singlechart.component.ts
index 44bebe80fff..54c71ec221f 100644
--- a/ui/src/app/edge/history/storage/singlechart.component.ts
+++ b/ui/src/app/edge/history/storage/singlechart.component.ts
@@ -16,8 +16,8 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class StorageSingleChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public showPhases: boolean;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public showPhases!: boolean;
 
     ngOnChanges() {
         this.updateChart();
diff --git a/ui/src/app/edge/history/storage/socchart.component.ts b/ui/src/app/edge/history/storage/socchart.component.ts
index b6e67531da2..b185c72cc30 100644
--- a/ui/src/app/edge/history/storage/socchart.component.ts
+++ b/ui/src/app/edge/history/storage/socchart.component.ts
@@ -14,7 +14,7 @@ import { AbstractHistoryChart } from '../abstracthistorychart';
 })
 export class SocStorageChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
     private emergencyCapacityReserveComponents: EdgeConfig.Component[] = [];
 
     public ngOnChanges() {
diff --git a/ui/src/app/edge/history/storage/totalchart.component.ts b/ui/src/app/edge/history/storage/totalchart.component.ts
index 36cfb326953..e371ec9121e 100644
--- a/ui/src/app/edge/history/storage/totalchart.component.ts
+++ b/ui/src/app/edge/history/storage/totalchart.component.ts
@@ -15,8 +15,8 @@ import { formatNumber } from '@angular/common';
     templateUrl: '../abstracthistorychart.html',
 })
 export class StorageTotalChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
-    @Input() public period: DefaultTypes.HistoryPeriod;
-    @Input() public showPhases: boolean;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public showPhases!: boolean;
 
     ngOnChanges() {
         this.updateChart();
diff --git a/ui/src/app/edge/history/storage/widget.component.ts b/ui/src/app/edge/history/storage/widget.component.ts
index 1673230f739..185c962da11 100644
--- a/ui/src/app/edge/history/storage/widget.component.ts
+++ b/ui/src/app/edge/history/storage/widget.component.ts
@@ -12,7 +12,7 @@ import { AbstractHistoryWidget } from '../abstracthistorywidget';
 })
 export class StorageComponent extends AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public period: DefaultTypes.HistoryPeriod;
+    @Input({ required: true }) public period!: DefaultTypes.HistoryPeriod;
 
     private static readonly SELECTOR = "storageWidget";
 
diff --git a/ui/src/app/edge/live/Controller/ChpSoc/modal/modal.component.ts b/ui/src/app/edge/live/Controller/ChpSoc/modal/modal.component.ts
index 3a4ab019f79..636e1265b75 100644
--- a/ui/src/app/edge/live/Controller/ChpSoc/modal/modal.component.ts
+++ b/ui/src/app/edge/live/Controller/ChpSoc/modal/modal.component.ts
@@ -17,10 +17,10 @@ export class Controller_ChpSocModalComponent implements OnInit {
 
     private static readonly SELECTOR = "chpsoc-modal";
 
-    @Input() public edge: Edge;
-    @Input() public component: EdgeConfig.Component;
-    @Input() public outputChannel: ChannelAddress;
-    @Input() public inputChannel: ChannelAddress;
+    @Input({ required: true }) public edge!: Edge;
+    @Input({ required: true }) public component!: EdgeConfig.Component;
+    @Input({ required: true }) public outputChannel!: ChannelAddress;
+    @Input({ required: true }) public inputChannel!: ChannelAddress;
 
     public thresholds: RangeValue = {
         lower: null,
diff --git a/ui/src/app/edge/live/Controller/Ess/GridOptimizedCharge/modal/predictionChart.ts b/ui/src/app/edge/live/Controller/Ess/GridOptimizedCharge/modal/predictionChart.ts
index 746098619b3..66d67ee2cf5 100644
--- a/ui/src/app/edge/live/Controller/Ess/GridOptimizedCharge/modal/predictionChart.ts
+++ b/ui/src/app/edge/live/Controller/Ess/GridOptimizedCharge/modal/predictionChart.ts
@@ -15,11 +15,11 @@ import { ChannelAddress, Edge, EdgeConfig, Service, Utils } from 'src/app/shared
 })
 export class PredictionChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-    @Input() protected refresh: boolean;
-    @Input() protected override edge: Edge;
-    @Input() public component: EdgeConfig.Component;
-    @Input() public targetEpochSeconds: number;
-    @Input() public chargeStartEpochSeconds: number;
+    @Input({ required: true }) protected refresh!: boolean;
+    @Input({ required: true }) protected override edge!: Edge;
+    @Input({ required: true }) public component!: EdgeConfig.Component;
+    @Input({ required: true }) public targetEpochSeconds!: number;
+    @Input({ required: true }) public chargeStartEpochSeconds!: number;
 
     private static DEFAULT_PERIOD: DefaultTypes.HistoryPeriod = new DefaultTypes.HistoryPeriod(new Date(), new Date());
 
diff --git a/ui/src/app/edge/live/Controller/Ess/TimeOfUseTariff/modal/powerSocChart.ts b/ui/src/app/edge/live/Controller/Ess/TimeOfUseTariff/modal/powerSocChart.ts
index 562a139ceae..37e03611dc0 100644
--- a/ui/src/app/edge/live/Controller/Ess/TimeOfUseTariff/modal/powerSocChart.ts
+++ b/ui/src/app/edge/live/Controller/Ess/TimeOfUseTariff/modal/powerSocChart.ts
@@ -18,9 +18,9 @@ import { GetScheduleResponse } from '../../../../../../shared/jsonrpc/response/g
 })
 export class SchedulePowerAndSocChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public refresh: boolean;
-    @Input() public override edge: Edge;
-    @Input() public component: EdgeConfig.Component;
+    @Input({ required: true }) public refresh!: boolean;
+    @Input({ required: true }) public override edge!: Edge;
+    @Input({ required: true }) public component!: EdgeConfig.Component;
 
     public ngOnChanges() {
         this.updateChart();
diff --git a/ui/src/app/edge/live/Controller/Ess/TimeOfUseTariff/modal/statePriceChart.ts b/ui/src/app/edge/live/Controller/Ess/TimeOfUseTariff/modal/statePriceChart.ts
index cb6fc333a81..797f22701c0 100644
--- a/ui/src/app/edge/live/Controller/Ess/TimeOfUseTariff/modal/statePriceChart.ts
+++ b/ui/src/app/edge/live/Controller/Ess/TimeOfUseTariff/modal/statePriceChart.ts
@@ -21,9 +21,9 @@ import { Controller_Ess_TimeOfUseTariff } from '../Ess_TimeOfUseTariff';
 })
 export class ScheduleStateAndPriceChartComponent extends AbstractHistoryChart implements OnInit, OnChanges, OnDestroy {
 
-    @Input() public refresh: boolean;
-    @Input() public override edge: Edge;
-    @Input() public component: EdgeConfig.Component;
+    @Input({ required: true }) public refresh!: boolean;
+    @Input({ required: true }) public override edge!: Edge;
+    @Input({ required: true }) public component!: EdgeConfig.Component;
 
     private currencyLabel: Currency.Label; // Default
 
diff --git a/ui/src/app/edge/live/Controller/Evcs/administration/administration.component.ts b/ui/src/app/edge/live/Controller/Evcs/administration/administration.component.ts
index bc9fb3b4fef..9fafeee392b 100644
--- a/ui/src/app/edge/live/Controller/Evcs/administration/administration.component.ts
+++ b/ui/src/app/edge/live/Controller/Evcs/administration/administration.component.ts
@@ -11,8 +11,8 @@ import { Edge, EdgeConfig, Service, Websocket } from '../../../../../shared/shar
 })
 export class AdministrationComponent implements OnInit {
 
-  @Input() public evcsComponent: EdgeConfig.Component;
-  @Input() public edge: Edge;
+  @Input({ required: true }) public evcsComponent!: EdgeConfig.Component;
+  @Input({ required: true }) public edge!: Edge;
 
   private static readonly SELECTOR = "administration";
 
diff --git a/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/modal/modal.component.ts b/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/modal/modal.component.ts
index 5e58e17716d..93ea4683053 100644
--- a/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/modal/modal.component.ts
+++ b/ui/src/app/edge/live/Controller/Io/ChannelSingleThreshold/modal/modal.component.ts
@@ -14,11 +14,11 @@ type inputMode = 'SOC' | 'GRIDSELL' | 'GRIDBUY' | 'PRODUCTION' | 'OTHER';
 })
 export class Controller_Io_ChannelSingleThresholdModalComponent implements OnInit {
 
-  @Input() public edge: Edge;
-  @Input() public config: EdgeConfig;
-  @Input() public component: EdgeConfig.Component;
+  @Input({ required: true }) public edge!: Edge;
+  @Input({ required: true }) public config!: EdgeConfig;
+  @Input({ required: true }) public component!: EdgeConfig.Component;
   @Input() public outputChannel: ChannelAddress | null = null;
-  @Input() public inputChannel: ChannelAddress;
+  @Input({ required: true }) public inputChannel!: ChannelAddress;
   @Input() public inputChannelUnit: string | null = null;
 
   public formGroup: FormGroup;
diff --git a/ui/src/app/edge/live/Controller/Io/FixDigitalOutput/modal/modal.component.ts b/ui/src/app/edge/live/Controller/Io/FixDigitalOutput/modal/modal.component.ts
index 3a6111ccab2..b1564acb6da 100644
--- a/ui/src/app/edge/live/Controller/Io/FixDigitalOutput/modal/modal.component.ts
+++ b/ui/src/app/edge/live/Controller/Io/FixDigitalOutput/modal/modal.component.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Component, Input } from '@angular/core';
 import { Router } from '@angular/router';
 import { ModalController } from '@ionic/angular';
@@ -11,8 +10,8 @@ import { Edge, EdgeConfig, Service, Websocket } from 'src/app/shared/shared';
 })
 export class Controller_Io_FixDigitalOutputModalComponent {
 
-  @Input() public edge: Edge;
-  @Input() public component: EdgeConfig.Component;
+  @Input({ required: true }) public edge!: Edge;
+  @Input({ required: true }) public component!: EdgeConfig.Component;
 
   constructor(
     public service: Service,
diff --git a/ui/src/app/edge/live/Controller/PeakShaving/Asymmetric/modal/modal.component.ts b/ui/src/app/edge/live/Controller/PeakShaving/Asymmetric/modal/modal.component.ts
index 751df3e54b1..327a63386d6 100644
--- a/ui/src/app/edge/live/Controller/PeakShaving/Asymmetric/modal/modal.component.ts
+++ b/ui/src/app/edge/live/Controller/PeakShaving/Asymmetric/modal/modal.component.ts
@@ -12,9 +12,9 @@ import { Edge, EdgeConfig, Service, Websocket } from '../../../../../../shared/s
 })
 export class Controller_Asymmetric_PeakShavingModalComponent implements OnInit {
 
-    @Input() protected component: EdgeConfig.Component;
-    @Input() protected edge: Edge;
-    @Input() protected mostStressedPhase: Subject<{ name: 'L1' | 'L2' | 'L3' | '', value: number }>;
+    @Input({ required: true }) protected component!: EdgeConfig.Component;
+    @Input({ required: true }) protected edge!: Edge;
+    @Input({ required: true }) protected mostStressedPhase!: Subject<{ name: 'L1' | 'L2' | 'L3' | '', value: number }>;
 
     public formGroup: FormGroup;
     public loading: boolean = false;
diff --git a/ui/src/app/edge/live/Controller/PeakShaving/Symmetric/modal/modal.component.ts b/ui/src/app/edge/live/Controller/PeakShaving/Symmetric/modal/modal.component.ts
index 2f1c86eed96..b733e98f5b9 100644
--- a/ui/src/app/edge/live/Controller/PeakShaving/Symmetric/modal/modal.component.ts
+++ b/ui/src/app/edge/live/Controller/PeakShaving/Symmetric/modal/modal.component.ts
@@ -11,8 +11,8 @@ import { Edge, EdgeConfig, Service, Websocket } from '../../../../../../shared/s
 })
 export class Controller_Symmetric_PeakShavingModalComponent implements OnInit {
 
-    @Input() protected component: EdgeConfig.Component;
-    @Input() protected edge: Edge;
+    @Input({ required: true }) protected component!: EdgeConfig.Component;
+    @Input({ required: true }) protected edge!: Edge;
 
 
     public formGroup: FormGroup;
diff --git a/ui/src/app/edge/live/Io/Api_DigitalInput/modal/modal.component.ts b/ui/src/app/edge/live/Io/Api_DigitalInput/modal/modal.component.ts
index eda63d38897..5169a6f4ae5 100644
--- a/ui/src/app/edge/live/Io/Api_DigitalInput/modal/modal.component.ts
+++ b/ui/src/app/edge/live/Io/Api_DigitalInput/modal/modal.component.ts
@@ -13,8 +13,8 @@ import { JsonrpcRequest, JsonrpcResponseSuccess } from 'src/app/shared/jsonrpc/b
 export class Io_Api_DigitalInput_ModalComponent implements OnInit, OnDestroy {
     private static readonly SELECTOR = "Io_Api_DigitalInput_ModalComponent";
 
-    @Input() public edge: Edge;
-    @Input() public ioComponents: EdgeConfig.Component[];
+    @Input({ required: true }) public edge!: Edge;
+    @Input({ required: true }) public ioComponents!: EdgeConfig.Component[];
 
     protected digitalInputChannelsPerComponent: { componentId: string, componentAlias: string, channels: Channel[] }[];
 
diff --git a/ui/src/app/edge/live/Multiple/Evcs_Api_Cluster/modal/evcs-chart/evcs.chart.ts b/ui/src/app/edge/live/Multiple/Evcs_Api_Cluster/modal/evcs-chart/evcs.chart.ts
index 75ba5857c7a..a80251edbf6 100644
--- a/ui/src/app/edge/live/Multiple/Evcs_Api_Cluster/modal/evcs-chart/evcs.chart.ts
+++ b/ui/src/app/edge/live/Multiple/Evcs_Api_Cluster/modal/evcs-chart/evcs.chart.ts
@@ -13,11 +13,11 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class EvcsChartComponent implements OnInit, OnChanges {
 
-  @Input() private evcsMap: { [sourceId: string]: EdgeConfig.Component };
-  @Input() private edge: Edge;
-  @Input() private currentData: CurrentData;
+  @Input({ required: true }) private evcsMap!: { [sourceId: string]: EdgeConfig.Component };
+  @Input({ required: true }) private edge!: Edge;
+  @Input({ required: true }) private currentData!: CurrentData;
   @Input() private evcsConfigMap: { [evcsId: string]: EdgeConfig.Component } = {};
-  @Input() private componentId: string;
+  @Input({ required: true }) private componentId!: string;
 
   private static readonly SELECTOR = "evcsChart";
   public loading: boolean = true;
diff --git a/ui/src/app/edge/live/Multiple/Evcs_Api_Cluster/modal/evcsCluster-modal.page.ts b/ui/src/app/edge/live/Multiple/Evcs_Api_Cluster/modal/evcsCluster-modal.page.ts
index 065900afded..c6c79c7e69c 100644
--- a/ui/src/app/edge/live/Multiple/Evcs_Api_Cluster/modal/evcsCluster-modal.page.ts
+++ b/ui/src/app/edge/live/Multiple/Evcs_Api_Cluster/modal/evcsCluster-modal.page.ts
@@ -14,9 +14,9 @@ type Priority = 'CAR' | 'STORAGE';
 })
 export class Evcs_Api_ClusterModalComponent implements OnInit {
 
-    @Input() public edge: Edge;
+    @Input({ required: true }) public edge!: Edge;
     @Input() public config: EdgeConfig.Component = null;
-    @Input() public componentId: string;
+    @Input({ required: true }) public componentId!: string;
     @Input() public evcsMap: { [sourceId: string]: EdgeConfig.Component } = {};
 
     @ViewChild(IonReorderGroup, { static: true })
diff --git a/ui/src/app/edge/live/common/storage/modal/modal.component.ts b/ui/src/app/edge/live/common/storage/modal/modal.component.ts
index 8fc10a04131..0c4de15b7d4 100644
--- a/ui/src/app/edge/live/common/storage/modal/modal.component.ts
+++ b/ui/src/app/edge/live/common/storage/modal/modal.component.ts
@@ -15,10 +15,10 @@ export class StorageModalComponent implements OnInit, OnDestroy {
 
     // TODO after refactoring of Model: subscribe to EssActivePowerL1/L2/L3 here instead of Flat Widget
 
-    @Input() protected edge: Edge;
-    @Input() protected config: EdgeConfig;
+    @Input({ required: true }) protected edge!: Edge;
+    @Input({ required: true }) protected config!: EdgeConfig;
     @Input() protected essComponents: EdgeConfig.Component[] | null = null;
-    @Input() protected chargerComponents: EdgeConfig.Component[];
+    @Input({ required: true }) protected chargerComponents!: EdgeConfig.Component[];
     @Input() protected singleComponent: EdgeConfig.Component = null;
 
     // reference to the Utils method to access via html
diff --git a/ui/src/app/edge/live/delayedselltogrid/delayedselltogrid.component.ts b/ui/src/app/edge/live/delayedselltogrid/delayedselltogrid.component.ts
index 5f14f0149a4..ea2ca6e7d0a 100644
--- a/ui/src/app/edge/live/delayedselltogrid/delayedselltogrid.component.ts
+++ b/ui/src/app/edge/live/delayedselltogrid/delayedselltogrid.component.ts
@@ -14,7 +14,7 @@ export class DelayedSellToGridComponent implements OnInit, OnDestroy {
 
     private static readonly SELECTOR = "delayedselltogrid";
 
-    @Input() public componentId: string;
+    @Input({ required: true }) public componentId!: string;
 
     public edge: Edge = null;
 
diff --git a/ui/src/app/edge/live/delayedselltogrid/modal/modal.component.ts b/ui/src/app/edge/live/delayedselltogrid/modal/modal.component.ts
index c9a4efbb5b5..e8cd66dad20 100644
--- a/ui/src/app/edge/live/delayedselltogrid/modal/modal.component.ts
+++ b/ui/src/app/edge/live/delayedselltogrid/modal/modal.component.ts
@@ -11,8 +11,8 @@ import { Edge, EdgeConfig, Service, Websocket } from '../../../../shared/shared'
 })
 export class DelayedSellToGridModalComponent implements OnInit {
 
-    @Input() protected component: EdgeConfig.Component;
-    @Input() protected edge: Edge;
+    @Input({ required: true }) protected component!: EdgeConfig.Component;
+    @Input({ required: true }) protected edge!: Edge;
 
     private static readonly SELECTOR = "delayedselltogrid-modal";
 
diff --git a/ui/src/app/edge/settings/app/formly/safe-input/formly-safe-input-modal.component.ts b/ui/src/app/edge/settings/app/formly/safe-input/formly-safe-input-modal.component.ts
index 745dcf43183..60ef52e3be1 100644
--- a/ui/src/app/edge/settings/app/formly/safe-input/formly-safe-input-modal.component.ts
+++ b/ui/src/app/edge/settings/app/formly/safe-input/formly-safe-input-modal.component.ts
@@ -10,12 +10,12 @@ import { FormlyFieldConfig } from "@ngx-formly/core";
 })
 export class FormlySafeInputModalComponent implements OnInit {
 
-    @Input()
-    protected title: string;
+    @Input({ required: true })
+    protected title!: string;
     @Input()
     protected fields: FormlyFieldConfig[] = null;
-    @Input()
-    protected model: {};
+    @Input({ required: true })
+    protected model!: {};
 
     protected form: FormGroup = new FormGroup({});
     protected myModel: {};
diff --git a/ui/src/app/edge/settings/app/keypopup/modal.component.ts b/ui/src/app/edge/settings/app/keypopup/modal.component.ts
index d94779ef5c8..43c1345b999 100644
--- a/ui/src/app/edge/settings/app/keypopup/modal.component.ts
+++ b/ui/src/app/edge/settings/app/keypopup/modal.component.ts
@@ -22,10 +22,10 @@ import { hasPredefinedKey } from '../permissions';
 })
 export class KeyModalComponent implements OnInit {
 
-    @Input() public edge: Edge;
+    @Input({ required: true }) public edge!: Edge;
     @Input() public appId: string | null = null;
     @Input() public appName: string | null = null;
-    @Input() public behaviour: KeyValidationBehaviour;
+    @Input({ required: true }) public behaviour!: KeyValidationBehaviour;
 
     @Input() public knownApps: GetApps.App[] | null = null;
 
diff --git a/ui/src/app/edge/settings/system/oe-system-update.component.ts b/ui/src/app/edge/settings/system/oe-system-update.component.ts
index 7b0689beab5..b04d15d2f26 100644
--- a/ui/src/app/edge/settings/system/oe-system-update.component.ts
+++ b/ui/src/app/edge/settings/system/oe-system-update.component.ts
@@ -15,7 +15,7 @@ export class OeSystemUpdateComponent implements OnInit, OnDestroy {
 
   @Output() public stateChanged: EventEmitter<SystemUpdateState> = new EventEmitter();
   @Input() public executeUpdateInstantly: boolean = false;
-  @Input() public edge: Edge;
+  @Input({ required: true }) public edge!: Edge;
   public readonly environment = environment;
   public readonly spinnerId: string = OeSystemUpdateComponent.SELECTOR;
 
diff --git a/ui/src/app/shared/chartoptions/chartoptions.component.ts b/ui/src/app/shared/chartoptions/chartoptions.component.ts
index d7cefe3fd04..842a726c003 100644
--- a/ui/src/app/shared/chartoptions/chartoptions.component.ts
+++ b/ui/src/app/shared/chartoptions/chartoptions.component.ts
@@ -11,8 +11,8 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class ChartOptionsComponent {
 
-    @Input() public showPhases: boolean | null;
-    @Input() public showTotal: boolean | null;
+    @Input({ required: true }) public showPhases!: boolean | null;
+    @Input({ required: true }) public showTotal!: boolean | null;
     @Output() public setShowPhases = new EventEmitter<boolean>();
     @Output() public setShowTotal = new EventEmitter<boolean>();
 
diff --git a/ui/src/app/shared/edge/meter/esscharger/modal.component.ts b/ui/src/app/shared/edge/meter/esscharger/modal.component.ts
index 594394991e8..e0f8bc8887d 100644
--- a/ui/src/app/shared/edge/meter/esscharger/modal.component.ts
+++ b/ui/src/app/shared/edge/meter/esscharger/modal.component.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Component, Input } from '@angular/core';
 import { Converter } from 'src/app/shared/genericComponents/shared/converter';
 import { Utils } from 'src/app/shared/shared';
@@ -10,7 +9,7 @@ import { EdgeConfig } from '../../edgeconfig';
     templateUrl: './modal.component.html',
 })
 export class EssChargerComponent {
-    @Input() public component: EdgeConfig.Component;
+    @Input({ required: true }) public component!: EdgeConfig.Component;
     protected readonly Role = Role;
     protected readonly Utils = Utils;
     protected readonly Converter = Converter;
diff --git a/ui/src/app/shared/formly/formly-select-field-modal.component.ts b/ui/src/app/shared/formly/formly-select-field-modal.component.ts
index d2a72af4576..2ef2314fced 100644
--- a/ui/src/app/shared/formly/formly-select-field-modal.component.ts
+++ b/ui/src/app/shared/formly/formly-select-field-modal.component.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Component, Input, OnInit } from "@angular/core";
 import { ModalController } from "@ionic/angular";
 
@@ -8,8 +7,8 @@ import { ModalController } from "@ionic/angular";
 })
 export class FormlySelectFieldModalComponent implements OnInit {
 
-    @Input() public title: string;
-    @Input() public options: { label: string, value: string, description?: string }[];
+    @Input({ required: true }) public title!: string;
+    @Input({ required: true }) public options!: { label: string, value: string, description?: string }[];
 
     @Input() public initialSelectedValue: string | null = null;
 
diff --git a/ui/src/app/shared/formly/formly-skeleton-wrapper.ts b/ui/src/app/shared/formly/formly-skeleton-wrapper.ts
index fdc339aebae..f0c2bb276dd 100644
--- a/ui/src/app/shared/formly/formly-skeleton-wrapper.ts
+++ b/ui/src/app/shared/formly/formly-skeleton-wrapper.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { FormlyFieldConfig } from '@ngx-formly/core';
@@ -25,7 +24,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 })
 export class FormlyFieldWithLoadingAnimationComponent {
   @Input() public show: boolean = false;
-  @Input() public fields: FormlyFieldConfig[];
-  @Input() public form: FormGroup;
-  @Input() public model: any;
+  @Input({ required: true }) public fields!: FormlyFieldConfig[];
+  @Input({ required: true }) public form!: FormGroup;
+  @Input({ required: true }) public model!: any;
 }
diff --git a/ui/src/app/shared/genericComponents/abstracthistorywidget.ts b/ui/src/app/shared/genericComponents/abstracthistorywidget.ts
index 6786e3e0417..550a34c1907 100644
--- a/ui/src/app/shared/genericComponents/abstracthistorywidget.ts
+++ b/ui/src/app/shared/genericComponents/abstracthistorywidget.ts
@@ -12,11 +12,11 @@ import { v4 as uuidv4 } from 'uuid';
 @Directive()
 export abstract class AbstractHistoryWidget implements OnInit, OnChanges, OnDestroy {
 
-  @Input()
-  public period: DefaultTypes.HistoryPeriod;
+  @Input({ required: true })
+  public period!: DefaultTypes.HistoryPeriod;
 
-  @Input()
-  protected componentId: string;
+  @Input({ required: true })
+  protected componentId!: string;
 
   /**
    * True after this.edge, this.config and this.component are set.
diff --git a/ui/src/app/shared/genericComponents/chart/abstracthistorychart.ts b/ui/src/app/shared/genericComponents/chart/abstracthistorychart.ts
index 6cfedde7115..b134b507eed 100644
--- a/ui/src/app/shared/genericComponents/chart/abstracthistorychart.ts
+++ b/ui/src/app/shared/genericComponents/chart/abstracthistorychart.ts
@@ -37,9 +37,9 @@ export abstract class AbstractHistoryChart implements OnInit {
   @Input() public chartTitle: string = "";
 
   /** TODO: workaround with Observables, to not have to pass the period on Initialisation */
-  @Input() public component: EdgeConfig.Component;
-  @Input() public showPhases: boolean;
-  @Input() public showTotal: boolean;
+  @Input() public component?: EdgeConfig.Component;
+  @Input() public showPhases: boolean = false;
+  @Input() public showTotal: boolean = false;
   @Input() public isOnlyChart: boolean = false;
 
   public edge: Edge | null = null;
diff --git a/ui/src/app/shared/genericComponents/chart/chart.ts b/ui/src/app/shared/genericComponents/chart/chart.ts
index 35436b36467..d9e1da57d0b 100644
--- a/ui/src/app/shared/genericComponents/chart/chart.ts
+++ b/ui/src/app/shared/genericComponents/chart/chart.ts
@@ -23,7 +23,7 @@ export class ChartComponent implements OnInit, OnChanges {
   @Input() public isPopoverNeeded: boolean = false;
 
   // Manually trigger ChangeDetection through Inputchange
-  @Input() private period: DefaultTypes.PeriodString;
+  @Input() private period?: DefaultTypes.PeriodString;
   protected showPopover: boolean = false;
 
   constructor(
diff --git a/ui/src/app/shared/genericComponents/flat/flat-widget-line/flat-widget-line.ts b/ui/src/app/shared/genericComponents/flat/flat-widget-line/flat-widget-line.ts
index 7ce3eab9718..78d3dcabd73 100644
--- a/ui/src/app/shared/genericComponents/flat/flat-widget-line/flat-widget-line.ts
+++ b/ui/src/app/shared/genericComponents/flat/flat-widget-line/flat-widget-line.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Component, Input } from "@angular/core";
 
 import { AbstractFlatWidgetLine } from "../abstract-flat-widget-line";
@@ -9,10 +8,10 @@ import { AbstractFlatWidgetLine } from "../abstract-flat-widget-line";
 })
 export class FlatWidgetLineComponent extends AbstractFlatWidgetLine {
     /** Name for parameter, displayed on the left side */
-    @Input()
-    public name: string;
+    @Input({ required: true })
+    public name!: string;
 
     /** Width of left Column, right Column is (100 - width of left Column) */
     @Input()
-    public leftColumnWidth: number;
+    public leftColumnWidth?: number;
 }
diff --git a/ui/src/app/shared/genericComponents/flat/flat.ts b/ui/src/app/shared/genericComponents/flat/flat.ts
index c15744a15ed..5d651dd208f 100644
--- a/ui/src/app/shared/genericComponents/flat/flat.ts
+++ b/ui/src/app/shared/genericComponents/flat/flat.ts
@@ -9,14 +9,14 @@ import { Icon } from 'src/app/shared/type/widget';
 export class FlatWidgetComponent {
 
   /** Image in Header */
-  @Input() public img: string;
+  @Input() public img?: string;
 
   /** Icon in Header */
-  @Input() public icon: Icon = null;
+  @Input() public icon: Icon | null = null;
 
   /** BackgroundColor of the Header (light or dark) */
-  @Input() public color: string;
+  @Input() public color?: string;
 
   /** Title in Header */
-  @Input() public title: string;
+  @Input() public title?: string;
 }
diff --git a/ui/src/app/shared/genericComponents/modal/abstract-modal-line.ts b/ui/src/app/shared/genericComponents/modal/abstract-modal-line.ts
index 5381137990c..77bfd7fc851 100644
--- a/ui/src/app/shared/genericComponents/modal/abstract-modal-line.ts
+++ b/ui/src/app/shared/genericComponents/modal/abstract-modal-line.ts
@@ -17,13 +17,13 @@ import { Filter } from "../shared/filter";
 export abstract class AbstractModalLine implements OnInit, OnDestroy, OnChanges {
 
     /** FormGroup */
-    @Input() public formGroup: FormGroup;
+    @Input({ required: true }) public formGroup!: FormGroup;
 
     /** component */
     @Input() public component: EdgeConfig.Component = null;
 
     /** FormGroup ControlName */
-    @Input() public controlName: string;
+    @Input({ required: true }) public controlName!: string;
 
     /**
     * Use `converter` to convert/map a CurrentData value to another value, e.g. an Enum number to a text.
@@ -53,7 +53,7 @@ export abstract class AbstractModalLine implements OnInit, OnDestroy, OnChanges
         }
     }
 
-    @Input() public value: number | string;
+    @Input({ required: true }) public value!: number | string;
     @Input() public roleIsAtLeast?: Role = Role.GUEST;
     protected show: boolean = true;
 
diff --git a/ui/src/app/shared/genericComponents/modal/modal-button/modal-button.ts b/ui/src/app/shared/genericComponents/modal/modal-button/modal-button.ts
index 0c118509ce9..ffa19945c66 100644
--- a/ui/src/app/shared/genericComponents/modal/modal-button/modal-button.ts
+++ b/ui/src/app/shared/genericComponents/modal/modal-button/modal-button.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Component, Input } from "@angular/core";
 import { Icon } from "src/app/shared/type/widget";
 import { AbstractModalLine } from "../abstract-modal-line";
@@ -9,7 +8,7 @@ import { AbstractModalLine } from "../abstract-modal-line";
 })
 export class ModalButtonsComponent extends AbstractModalLine {
 
-    @Input() protected buttons: ButtonLabel[];
+    @Input({ required: true }) protected buttons!: ButtonLabel[];
 }
 
 export type ButtonLabel = {
diff --git a/ui/src/app/shared/genericComponents/modal/modal-info-line/modal-info-line.ts b/ui/src/app/shared/genericComponents/modal/modal-info-line/modal-info-line.ts
index ec2b7ff70d1..a1138593a91 100644
--- a/ui/src/app/shared/genericComponents/modal/modal-info-line/modal-info-line.ts
+++ b/ui/src/app/shared/genericComponents/modal/modal-info-line/modal-info-line.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Component, Input } from "@angular/core";
 import { Icon } from "src/app/shared/type/widget";
 
@@ -9,15 +8,15 @@ import { Icon } from "src/app/shared/type/widget";
 export class ModalInfoLineComponent {
 
     /** Icon, displayed on the left side */
-    @Input() protected icon: Icon;
+    @Input({ required: true }) protected icon!: Icon;
 
     /**
      *  Info-Text, displayed on the right side, optional style for all lines
      *  Multiple lines with own style is possible
      *  */
-    @Input() public info: { text: string, lineStyle?: string }[] | string;
+    @Input({ required: true }) public info!: { text: string, lineStyle?: string }[] | string;
 
-    @Input() protected lineStyle: string;
+    @Input({ required: true }) protected lineStyle!: string;
 
-    @Input() protected rowStyle: string;
+    @Input({ required: true }) protected rowStyle!: string;
 }
diff --git a/ui/src/app/shared/genericComponents/modal/modal-line/modal-line.ts b/ui/src/app/shared/genericComponents/modal/modal-line/modal-line.ts
index 9da02e03038..ce9542a386d 100644
--- a/ui/src/app/shared/genericComponents/modal/modal-line/modal-line.ts
+++ b/ui/src/app/shared/genericComponents/modal/modal-line/modal-line.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Component, Input } from "@angular/core";
 import { AbstractModalLine } from "../abstract-modal-line";
 import { ButtonLabel } from "../modal-button/modal-button";
@@ -10,14 +9,14 @@ import { ButtonLabel } from "../modal-button/modal-button";
 export class ModalLineComponent extends AbstractModalLine {
 
     // Width of Left Column, Right Column is (100% - leftColumn)
-    @Input()
-    protected leftColumnWidth: number;
+    @Input({ required: true })
+    protected leftColumnWidth!: number;
 
     /** ControlName for Form Field */
-    @Input() public override controlName: string;
+    @Input({ required: true }) public override controlName!: string;
     @Input() protected button: ButtonLabel | null = null;
     /** ControlName for Toggle Button */
-    @Input() protected control:
+    @Input({ required: true }) protected control!:
         { type: 'TOGGLE' } |
         { type: 'INPUT', properties?: {unit:'W'} } |
         /* the available select options*/
diff --git a/ui/src/app/shared/genericComponents/modal/modal-value-line/modal-value-line.ts b/ui/src/app/shared/genericComponents/modal/modal-value-line/modal-value-line.ts
index 6f5ce00db9a..a6946e68d33 100644
--- a/ui/src/app/shared/genericComponents/modal/modal-value-line/modal-value-line.ts
+++ b/ui/src/app/shared/genericComponents/modal/modal-value-line/modal-value-line.ts
@@ -20,11 +20,11 @@ export class ModalValueLineComponent extends AbstractModalLine {
     return this.channels;
   }
 
-  @Input() private valueCallback: (currentData: CurrentData) => string;
+  @Input({ required: true }) private valueCallback!: (currentData: CurrentData) => string;
 
   // Width of Left Column, Right Column is (100% - leftColumn)
-  @Input()
-  protected leftColumnWidth: number;
+  @Input({ required: true })
+  protected leftColumnWidth!: number;
 
   /** Fixed indentation of the modal-line */
   @Input() protected textIndent: TextIndentation = TextIndentation.NONE;
diff --git a/ui/src/app/shared/genericComponents/modal/modal.ts b/ui/src/app/shared/genericComponents/modal/modal.ts
index df2dab11224..7911468e26b 100644
--- a/ui/src/app/shared/genericComponents/modal/modal.ts
+++ b/ui/src/app/shared/genericComponents/modal/modal.ts
@@ -29,7 +29,7 @@ export class ModalComponent {
     @Input() protected formGroup: FormGroup = new FormGroup({});
 
     /** Title in Header */
-    @Input() public title: string;
+    @Input({ required: true }) public title!: string;
 
     @Input() protected toolbarButtons: { url: string, icon: Icon }[] | { url: string, icon: Icon } | {
         callback: () =>
diff --git a/ui/src/app/shared/genericComponents/modal/model-horizontal-line/modal-horizontal-line.ts b/ui/src/app/shared/genericComponents/modal/model-horizontal-line/modal-horizontal-line.ts
index 03214110464..b6971de84de 100644
--- a/ui/src/app/shared/genericComponents/modal/model-horizontal-line/modal-horizontal-line.ts
+++ b/ui/src/app/shared/genericComponents/modal/model-horizontal-line/modal-horizontal-line.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Component, Input } from "@angular/core";
 
 /**
@@ -11,7 +10,7 @@ import { Component, Input } from "@angular/core";
 export class ModalHorizontalLineComponent {
 
     /** Components-Array to iterate over */
-    @Input() protected components: any[];
+    @Input({ required: true }) protected components!: any[];
     /** index is an iterator */
-    @Input() protected index: number;
+    @Input({ required: true }) protected index!: number;
 }
diff --git a/ui/src/app/shared/percentagebar/percentagebar.component.ts b/ui/src/app/shared/percentagebar/percentagebar.component.ts
index dfa6da83147..221c1a837ad 100644
--- a/ui/src/app/shared/percentagebar/percentagebar.component.ts
+++ b/ui/src/app/shared/percentagebar/percentagebar.component.ts
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import { Component, Input } from '@angular/core';
 
 @Component({
@@ -7,7 +6,7 @@ import { Component, Input } from '@angular/core';
 })
 export class PercentageBarComponent {
 
-    @Input() public value: number;
+    @Input({ required: true }) public value!: number;
     @Input() public showPercentageValue: boolean = true;
 
     constructor(