diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
index 8a97a99..ac5d4c5 100644
--- a/projects/demo/src/app/app.component.html
+++ b/projects/demo/src/app/app.component.html
@@ -1,46 +1,9 @@
-<style>
-  .toolbar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    background-color: #1976d2;
-    color: white;
-    font-weight: 600;
-  }
-
-  .toolbar img {
-    margin: 0 16px;
-  }
-
-  .container {
-    margin-top: 60px;
-    padding: 1rem;
-  }
-
-  footer {
-    margin-top: 8px;
-    display: flex;
-    align-items: center;
-    line-height: 20px;
-  }
-
-  footer a {
-    display: flex;
-    align-items: center;
-  }
-</style>
-
 <!-- Toolbar -->
 <div class="toolbar" role="banner">
   <img width="40"
        alt="Angular Logo"
        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="/>
   <span>Welcome to the <span class="text-monospace">ngx-property-editor</span> Demo</span>
-  <div class="spacer"></div>
 </div>
 
 <div class="container" role="main">
@@ -54,7 +17,7 @@
   </pe-select-input>
 
   <pe-tabs *ngIf="containerType == 'tabs'" id="demo-tabs">
- 
+
     <pe-tabs-item label="Input Components">
       <ng-container *ngTemplateOutlet="inputComponentsTemplate"></ng-container>
     </pe-tabs-item>
@@ -70,7 +33,7 @@
   </pe-tabs>
 
   <pe-accordion *ngIf="containerType == 'accordion'" id="demo-accordion">
- 
+
     <pe-accordion-item label="Input Components">
       <ng-container *ngTemplateOutlet="inputComponentsTemplate"></ng-container>
     </pe-accordion-item>
@@ -83,7 +46,7 @@
       <ng-container *ngTemplateOutlet="propertyEditorTemplate"></ng-container>
     </pe-accordion-item>
 
-  </pe-accordion> 
+  </pe-accordion>
 
   <!-- Footer -->
   <footer>
@@ -108,6 +71,7 @@
 
 <ng-template #propertyEditorTemplate>
   <pe-property-view-and-edit [data]="data"
+                             [configuration]="propertiesConfiguration"
                              viewModeType="editor"
                              editModeType="editor">
   </pe-property-view-and-edit>
diff --git a/projects/demo/src/app/app.component.scss b/projects/demo/src/app/app.component.scss
index e69de29..85c5dc4 100644
--- a/projects/demo/src/app/app.component.scss
+++ b/projects/demo/src/app/app.component.scss
@@ -0,0 +1,33 @@
+.toolbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  background-color: #1976d2;
+  color: white;
+  font-weight: 600;
+}
+
+.toolbar img {
+  margin: 0 16px;
+}
+
+.container {
+  margin-top: 60px;
+  padding: 1rem;
+}
+
+footer {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  line-height: 20px;
+}
+
+footer a {
+  display: flex;
+  align-items: center;
+}
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
index 50512e4..289cac4 100644
--- a/projects/demo/src/app/app.component.ts
+++ b/projects/demo/src/app/app.component.ts
@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { PropertiesConfiguration } from 'ngx-property-editor';
+import { Contact } from './model/contact';
 
 @Component({
   selector: 'demo-root',
@@ -23,7 +25,7 @@ export class AppComponent {
   /**
    * Display the properties of this object by the property table and editor.
    */
-  public data: any = {
+  public data: Contact = new Contact({
     gender: 'male',
     firstname: 'Charlie',
     lastname: 'Brown',
@@ -32,6 +34,13 @@ export class AppComponent {
     email: 'charlie.brown@peanuts.com',
     favorite: true,
     rating: 4,
-  };
+  });
+
+  /**
+   * Configuration of displayed properties including name, data type, displayed value etc.
+   * If undefined, the configuration will be automatically generated from the properties
+   * of the `data` object.
+   */
+  public propertiesConfiguration: PropertiesConfiguration | undefined = Contact.propertiesConfiguration;
 
 }
diff --git a/projects/demo/src/app/model/contact.ts b/projects/demo/src/app/model/contact.ts
new file mode 100644
index 0000000..6a8e941
--- /dev/null
+++ b/projects/demo/src/app/model/contact.ts
@@ -0,0 +1,85 @@
+import { PropertiesConfiguration, PropertyConfiguration } from 'ngx-property-editor';
+
+export class Contact {
+
+  public gender: 'male' | 'female' | undefined;
+  public firstname: string | undefined;
+  public lastname: string | undefined;
+  public birthday: Date | undefined;
+  public tel: string | undefined;
+  public email: string | undefined;
+  public favorite: boolean = false;
+  public rating: number | undefined;
+
+  constructor(data?: {
+    gender?: 'male' | 'female' | undefined,
+    firstname?: string | undefined,
+    lastname?: string | undefined,
+    birthday?: Date | undefined,
+    tel?: string | undefined,
+    email?: string | undefined,
+    favorite?: boolean | undefined,
+    rating?: number | undefined,
+  }) {
+    this.gender = data?.gender;
+    this.firstname = data?.firstname;
+    this.lastname = data?.lastname;
+    this.birthday = data?.birthday;
+    this.tel = data?.tel;
+    this.email = data?.email;
+    this.favorite = data?.favorite || false;
+    this.rating = data?.rating;
+  }
+
+  public static get propertiesConfiguration(): PropertiesConfiguration {
+    return [
+      new PropertyConfiguration({
+        propertyName: 'gender',
+        propertyType: 'select',
+        dataSource: [
+          { name: 'male', value: 'male' },
+          { name: 'female', value: 'female' },
+        ],
+        displayPropertyName: 'name',
+        valuePropertyName: 'value',
+        editable: true,
+      }),
+      new PropertyConfiguration({
+        propertyName: 'firstname',
+        propertyType: 'string',
+        editable: true,
+      }),
+      new PropertyConfiguration({
+        propertyName: 'lastname',
+        propertyType: 'string',
+        editable: true,
+      }),
+      new PropertyConfiguration({
+        propertyName: 'birthday',
+        propertyType: 'date',
+        editable: true,
+      }),
+      new PropertyConfiguration({
+        propertyName: 'tel',
+        propertyType: 'tel',
+        editable: true,
+      }),
+      new PropertyConfiguration({
+        propertyName: 'email',
+        propertyType: 'email',
+        editable: true,
+      }),
+      new PropertyConfiguration({
+        propertyName: 'favorite',
+        propertyType: 'boolean',
+        editable: true,
+      }),
+      new PropertyConfiguration({
+        propertyName: 'rating',
+        propertyType: 'rating',
+        editable: true,
+      }),
+    ];
+  }
+
+}
diff --git a/projects/ngx-property-editor/src/lib/components/bootstrap/column/column.component.ts b/projects/ngx-property-editor/src/lib/components/bootstrap/column/column.component.ts
index 24c4cc6..99c885c 100644
--- a/projects/ngx-property-editor/src/lib/components/bootstrap/column/column.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/bootstrap/column/column.component.ts
@@ -10,24 +10,25 @@ export class ColumnComponent implements OnChanges {
   /**
    * Bootstrap column width on md wide screens (class "col-md-...").
    */
-  @Input() md: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined = undefined;
+  @Input() public md: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | undefined = undefined;
 
   /**
    * Bootstrap "col-..." classes are assigned to the host element of this component
    * via this property and its host binding.
    */
-  @HostBinding('class') class: string = '';
+  @HostBinding('class') public class: string = '';
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.hasOwnProperty('md'))
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes.hasOwnProperty('md')) {
       this.updateClass();
+    }
   }
 
   /**
    * Update the class property and thereby the class attribute of the host element of this component.
    */
   private updateClass(): void {
-    this.class = this.md == undefined ? 'col' : `col-md-${ this.md }`;
+    this.class = this.md == undefined ? 'col' : `col-md-${this.md}`;
   }
 
 }
diff --git a/projects/ngx-property-editor/src/lib/components/input/boolean-input/boolean-input.component.ts b/projects/ngx-property-editor/src/lib/components/input/boolean-input/boolean-input.component.ts
index 6340df8..4743391 100644
--- a/projects/ngx-property-editor/src/lib/components/input/boolean-input/boolean-input.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/boolean-input/boolean-input.component.ts
@@ -14,15 +14,15 @@ export class BooleanInputComponent extends InputBaseWithValue<boolean> {
    * - 'switch': As checkbox with bootstrap switch style.
    * - 'radio': As radio group with yes and no options.
    */
-  @Input() type: 'checkbox' | 'switch' | 'radio' = 'radio';
+  @Input() public type: 'checkbox' | 'switch' | 'radio' = 'radio';
 
   /**
    * If true and the `value` is undefined, the checkbox will display an indeterminate state.
    * If false and the `value` is undefined, the checkbox will display a false state (same as `value = false`).
    */
-  @Input() allowIndeterminate: boolean = false;
+  @Input() public allowIndeterminate: boolean = false;
 
-  constructor() {
+  public constructor() {
     super();
   }
 
diff --git a/projects/ngx-property-editor/src/lib/components/input/checkbox-select-input/checkbox-select-input.component.ts b/projects/ngx-property-editor/src/lib/components/input/checkbox-select-input/checkbox-select-input.component.ts
index ae06e19..eac084e 100644
--- a/projects/ngx-property-editor/src/lib/components/input/checkbox-select-input/checkbox-select-input.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/checkbox-select-input/checkbox-select-input.component.ts
@@ -8,14 +8,14 @@ import { InputBaseWithValueAndDataSource } from '../input-base';
 })
 export class CheckboxSelectInputComponent extends InputBaseWithValueAndDataSource<any[]> {
 
-  @Input() showSelectAll: boolean = false;
+  @Input() public showSelectAll: boolean = false;
 
-  constructor() {
+  public constructor() {
     super();
     this.value = [];
   }
 
-  onItemValueChanged(item: any, newSelectionValue: boolean) {
+  public onItemValueChanged(item: any, newSelectionValue: boolean): void {
     const itemValue: any = this.evaluateValuePropertyName(item);
 
     if (!Array.isArray(this.value))
@@ -33,7 +33,7 @@ export class CheckboxSelectInputComponent extends InputBaseWithValueAndDataSourc
     this.emitValueChange(this.value);
   }
 
-  onSelectAllClicked(newSelectionValue: boolean) {
+  public onSelectAllClicked(newSelectionValue: boolean | undefined): void {
     if (newSelectionValue == true) {
       this.value = this.dataSource?.map(item => this.evaluateValuePropertyName(item));
       this.emitValueChange(this.value);
diff --git a/projects/ngx-property-editor/src/lib/components/input/date-input/date-input.component.ts b/projects/ngx-property-editor/src/lib/components/input/date-input/date-input.component.ts
index 3949fc9..4f7cc16 100644
--- a/projects/ngx-property-editor/src/lib/components/input/date-input/date-input.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/date-input/date-input.component.ts
@@ -9,7 +9,7 @@ import { InputBaseWithValue } from '../input-base';
 export class DateInputComponent extends InputBaseWithValue<Date> {
 
   /** Defines the type of the HTML input element. Default: 'text'. */
-  @Input() type:
+  @Input() public type:
     /** Defines a date control (year, month, day (no time)). */
     'date' |
     /** Defines a date and time control (year, month, day, time (no timezone). */
@@ -21,11 +21,11 @@ export class DateInputComponent extends InputBaseWithValue<Date> {
     /** Defines a week and year control (no timezone). */
     'week' = 'date';
 
-  constructor() {
+  public constructor() {
     super();
   }
 
-  onInputChange(event: Event): void {
+  public onInputChange(event: Event): void {
     this.value = (event?.target as HTMLInputElement)?.valueAsDate || undefined;
     this.emitValueChange(this.value);
   }
diff --git a/projects/ngx-property-editor/src/lib/components/input/file-input/file-input.component.ts b/projects/ngx-property-editor/src/lib/components/input/file-input/file-input.component.ts
index 0dafcf7..90ca1fb 100644
--- a/projects/ngx-property-editor/src/lib/components/input/file-input/file-input.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/file-input/file-input.component.ts
@@ -9,20 +9,20 @@ import { InputBase } from '../input-base';
 export class FileInputComponent extends InputBase {
 
   /** Define the file type (extension you want to accept in this file input (e.g. ".txt"). */
-  @Input() accept: string | undefined = undefined;
+  @Input() public accept: string | undefined = undefined;
   /** If true, accept multi file selection (default: false). */
-  @Input() multiple: boolean = false;
+  @Input() public multiple: boolean = false;
 
   /**
-    * This event is triggered when the user selected on or multiple files.
-    * The selected files are passed as event argument.
-    */
-  @Output() readonly valueChange: EventEmitter<File[]> = new EventEmitter<File[]>();
+   * This event is triggered when the user selected on or multiple files.
+   * The selected files are passed as event argument.
+   */
+  @Output() public readonly valueChange: EventEmitter<File[]> = new EventEmitter<File[]>();
 
   /**
    * The user selected one or multiple file.
    */
-  onChange(event: Event) {
+  public onChange(event: Event): void {
     const inputElement = event?.target as HTMLInputElement;
     if (!inputElement) return;
 
diff --git a/projects/ngx-property-editor/src/lib/components/input/form-group/form-group.component.ts b/projects/ngx-property-editor/src/lib/components/input/form-group/form-group.component.ts
index 2a600f3..aacd8ad 100644
--- a/projects/ngx-property-editor/src/lib/components/input/form-group/form-group.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/form-group/form-group.component.ts
@@ -8,15 +8,15 @@ import { Component, Input } from '@angular/core';
 export class FormGroupComponent {
 
   /**
-   * Id of the input element which the label of this form group is describing.
+   * ID of the input element which the label of this form group is describing.
    * Only required, if a label is defined.
    */
-  @Input() for: string | undefined = undefined;
+  @Input() public for: string | undefined = undefined;
 
   /** If not empty a label is displayed at the top of this form group. */
-  @Input() label: string | undefined = undefined;
+  @Input() public label: string | undefined = undefined;
 
-  get labelWithColon(): string | undefined {
+  public get labelWithColon(): string | undefined {
     if (!this.label) return undefined;
     // Add colon only if label does not already end with a punctuation mark
     if (':,;?!'.includes(this.label[this.label.length - 1]))
@@ -25,18 +25,18 @@ export class FormGroupComponent {
   }
 
   /** If true, label and content are displayed in a grid in one line. */
-  @Input() inlineLabel: boolean = false;
+  @Input() public inlineLabel: boolean = false;
 
   /** If not empty, an `InfoIconComponent` is added to the end of the label with this text as tooltip. */
-  @Input() infoIconTooltip: string | undefined = undefined;
+  @Input() public infoIconTooltip: string | undefined = undefined;
 
   /**
    * If not empty, a `FormTextComponent` is added below the form group content (last child element
    * of the form group) with this text as content.
    */
-  @Input() helpText: string | undefined = undefined;
+  @Input() public helpText: string | undefined = undefined;
 
   /** If true, the input element is not wrapped inside a FormGroup component. */
-  @Input() noFormGroup: boolean = false;
+  @Input() public noFormGroup: boolean = false;
 
 }
diff --git a/projects/ngx-property-editor/src/lib/components/input/form-text/form-text.component.ts b/projects/ngx-property-editor/src/lib/components/input/form-text/form-text.component.ts
index b9a9775..cd01eb5 100644
--- a/projects/ngx-property-editor/src/lib/components/input/form-text/form-text.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/form-text/form-text.component.ts
@@ -9,6 +9,6 @@ import { PEGlobalFunctions } from '../../../controller/pe-global-functions';
 export class FormTextComponent {
 
   /** ID attribute of the form text element. */
-  @Input() id: string = PEGlobalFunctions.generateRandomId();
+  @Input() public id: string = PEGlobalFunctions.generateRandomId();
 
 }
diff --git a/projects/ngx-property-editor/src/lib/components/input/input-base.ts b/projects/ngx-property-editor/src/lib/components/input/input-base.ts
index da4b7fe..ab5cba5 100644
--- a/projects/ngx-property-editor/src/lib/components/input/input-base.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/input-base.ts
@@ -7,41 +7,41 @@ import { PEGlobalFunctions } from '../../controller/pe-global-functions';
 export class InputBase {
 
   /** ID attribute of the input element (required if a label is defined). */
-  @Input() id: string = PEGlobalFunctions.generateRandomId();
+  @Input() public id: string = PEGlobalFunctions.generateRandomId();
   /** Name attribute of the input element. */
-  @Input() name: string | undefined = undefined;
+  @Input() public name: string | undefined = undefined;
   /**
    * Only if a form group component is added (`noFormGroup == false`):
    * If not empty a label is displayed at the top of this form group.
    */
-  @Input() label: string | undefined = undefined;
+  @Input() public label: string | undefined = undefined;
   /** If not empty a placeholder is displayed in the input field. */
-  @Input() placeholder: string | undefined = undefined;
+  @Input() public placeholder: string | undefined = undefined;
   /**
    * Only if a form group component is added (`noFormGroup == false`):
    * If true, label and content are displayed in a grid in one line.
    */
-  @Input() inlineLabel: boolean = false;
+  @Input() public inlineLabel: boolean = false;
   /**
    * Only if a form group component is added (`noFormGroup == false`):
    * If not empty, an `InfoIconComponent` is added to the end of the label with this text as tooltip.
    */
-  @Input() infoIconTooltip: string | undefined = undefined;
+  @Input() public infoIconTooltip: string | undefined = undefined;
   /**
    * Only if a form group component is added (`noFormGroup == false`):
    * If not empty, a `FormTextComponent` is added below the input element with this text as content.
    */
-  @Input() helpText: string | undefined = undefined;
+  @Input() public helpText: string | undefined = undefined;
 
   /** If true, the value cannot be changed by the user. */
-  @Input() disabled: boolean = false;
+  @Input() public disabled: boolean = false;
   /** If true, the value is displayed as usual (not grey/disabled) but the user cannot change it. */
-  @Input() readonly: boolean = false;
+  @Input() public readonly: boolean = false;
   /** If true, an empty value is not valid. */
-  @Input() required: boolean = false;
+  @Input() public required: boolean = false;
 
   /** If true, the input element is not wrapped inside a form group component. */
-  @Input() noFormGroup: boolean = false;
+  @Input() public noFormGroup: boolean = false;
 
 }
 
@@ -51,19 +51,19 @@ export class InputBase {
 export class InputBaseWithValue<T> extends InputBase {
 
   /** The entered value. */
-  @Input() value: T | undefined = undefined;
+  @Input() public value: T | undefined = undefined;
 
   /**
    * This event is triggered when the user changed the entered value.
    * The new value is passed as event argument.
    */
-  @Output() readonly valueChange: EventEmitter<T> = new EventEmitter<T>();
+  @Output() public readonly valueChange: EventEmitter<T> = new EventEmitter<T>();
 
   /**
    * Triggers the valueChange event with the given new value as event argument.
    * @param newValue The new entered value.
    */
-  emitValueChange(newValue: T | undefined): void {
+  public emitValueChange(newValue: T | undefined): void {
     this.valueChange.emit(newValue);
   }
 
@@ -77,27 +77,27 @@ export class InputBaseWithValueAndDataSource<TValue, TDataSource = any> extends
   /**
    * An array from which the user can select one or multiple items.
    */
-  @Input() dataSource: { [key: string]: any }[] = [];
+  @Input() public dataSource: { [key: string]: any }[] = [];
 
   /**
    * Evaluate this property name on the data source items
    * to get the values of the select input element items.
    * If undefined, the whole data source item is used as value.
    */
-  @Input() valuePropertyName: string | undefined = undefined;
+  @Input() public valuePropertyName: string | undefined = undefined;
 
   /**
    * Evaluate this property name on the data source items
    * to get a string which is displayed on the select input element items.
    * If undefined, the whole data source item is used as display value.
    */
-  @Input() displayPropertyName: string | undefined = undefined;
+  @Input() public displayPropertyName: string | undefined = undefined;
 
   /**
    * Evaluates the `valuePropertyName` on the given data source item.
    * @param item An item of the `dataSource`.
    */
-  evaluateValuePropertyName(item: { [key: string]: any }): any {
+  public evaluateValuePropertyName(item: { [key: string]: any }): any {
     return PEGlobalFunctions.evaluateValuePropertyName(this.valuePropertyName, item);
   }
 
@@ -105,7 +105,7 @@ export class InputBaseWithValueAndDataSource<TValue, TDataSource = any> extends
    * Evaluates the `displayPropertyName` on the given data source item.
    * @param item An item of the `dataSource`.
    */
-  evaluateDisplayPropertyName(item: { [key: string]: any }): string {
+  public evaluateDisplayPropertyName(item: { [key: string]: any }): string {
     return PEGlobalFunctions.evaluateDisplayPropertyName(this.displayPropertyName, item);
   }
 
diff --git a/projects/ngx-property-editor/src/lib/components/input/number-input/number-input.component.ts b/projects/ngx-property-editor/src/lib/components/input/number-input/number-input.component.ts
index 322abfe..da07366 100644
--- a/projects/ngx-property-editor/src/lib/components/input/number-input/number-input.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/number-input/number-input.component.ts
@@ -9,14 +9,14 @@ import { InputBaseWithValue } from '../input-base';
 export class NumberInputComponent extends InputBaseWithValue<number> {
 
   /** Smallest allowed numeric value or undefined to allow any value. */
-  @Input() min: number | undefined = undefined;
+  @Input() public min: number | undefined = undefined;
   /** Largest allowed numeric value or undefined to allow any value. */
-  @Input() max: number | undefined = undefined;
+  @Input() public max: number | undefined = undefined;
 
   /** The up and down buttons change the value with this step size. */
-  @Input() step: number | undefined = 1;
+  @Input() public step: number | undefined = 1;
 
-  constructor() {
+  public constructor() {
     super();
   }
 
diff --git a/projects/ngx-property-editor/src/lib/components/input/radio-input/radio-input.component.ts b/projects/ngx-property-editor/src/lib/components/input/radio-input/radio-input.component.ts
index 95e7ab9..df7c39b 100644
--- a/projects/ngx-property-editor/src/lib/components/input/radio-input/radio-input.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/radio-input/radio-input.component.ts
@@ -9,9 +9,9 @@ import { InputBaseWithValueAndDataSource } from '../input-base';
 export class RadioInputComponent extends InputBaseWithValueAndDataSource<any> {
 
   /** If true, the radio inputs are displayed inline. */
-  @Input() inline: boolean = false;
+  @Input() public inline: boolean = false;
 
-  constructor() {
+  public constructor() {
     super();
   }
 
diff --git a/projects/ngx-property-editor/src/lib/components/input/rating-input/rating-input.component.ts b/projects/ngx-property-editor/src/lib/components/input/rating-input/rating-input.component.ts
index fa25453..fb0bf5e 100644
--- a/projects/ngx-property-editor/src/lib/components/input/rating-input/rating-input.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/rating-input/rating-input.component.ts
@@ -13,31 +13,31 @@ export class RatingInputComponent extends InputBaseWithValue<number> implements
   /**
    * Maximum rating value (default: 5). Ratings from 1 to `max` can be entered.
    */
-  @Input() max: number = 5;
+  @Input() public max: number = 5;
 
   /**
    * Helper array for the Angular template to be able to iterate over the numbers from 1 to `max`.
    */
-  ratingOptions: number [] = [1, 2, 3, 4, 5];
+  public ratingOptions: number [] = [1, 2, 3, 4, 5];
 
   /** Assign an FontAwesome icon here to replace inactive rating icons (default: empty star). */
-  @Input() iconInactive: IconDefinition | undefined = undefined;
+  @Input() public iconInactive: IconDefinition | undefined = undefined;
   /** Assign an FontAwesome icon here to replace active rating icons (default: filled star). */
-  @Input() iconActive: IconDefinition | undefined = undefined;
+  @Input() public iconActive: IconDefinition | undefined = undefined;
 
   /** Style attribute applied to inactive rating icons. */
-  @Input() iconStyleInactive: string | undefined = undefined;
+  @Input() public iconStyleInactive: string | undefined = undefined;
   /** Style attribute applied to active rating icons. */
-  @Input() iconStyleActive: string | undefined = undefined;
+  @Input() public iconStyleActive: string | undefined = undefined;
 
   public readonly iconStarActive: IconDefinition = faStarSolid;
   public readonly iconStarInactive: IconDefinition = faStarRegular;
 
-  constructor() {
+  public constructor() {
     super();
   }
 
-  ngOnChanges(changes: SimpleChanges) {
+  public ngOnChanges(changes: SimpleChanges): void {
     if (changes.hasOwnProperty('max')) {
       if (isNaN(this.max) || this.max < 1) this.max = 1;
       this.ratingOptions = Array.from({ length: this.max }, (_, i) => i + 1);
@@ -48,7 +48,7 @@ export class RatingInputComponent extends InputBaseWithValue<number> implements
    * This method is called, when the user clicked on one of the rating icons.
    * @param i Rating value related to the clicked rating icon.
    */
-  onStarClick(i: number): void {
+  public onStarClick(i: number): void {
     this.value = i;
     this.emitValueChange(i);
   }
diff --git a/projects/ngx-property-editor/src/lib/components/input/select-input/select-input.component.html b/projects/ngx-property-editor/src/lib/components/input/select-input/select-input.component.html
index b3c88a6..a2c925e 100644
--- a/projects/ngx-property-editor/src/lib/components/input/select-input/select-input.component.html
+++ b/projects/ngx-property-editor/src/lib/components/input/select-input/select-input.component.html
@@ -13,6 +13,7 @@
 
 <ng-template #contentTemplate>
   <select class="form-select"
+          [class.readonly]="readonly"
           [id]="id"
           [name]="name || id"
           [disabled]="disabled || readonly"
diff --git a/projects/ngx-property-editor/src/lib/components/input/select-input/select-input.component.scss b/projects/ngx-property-editor/src/lib/components/input/select-input/select-input.component.scss
index e69de29..6609961 100644
--- a/projects/ngx-property-editor/src/lib/components/input/select-input/select-input.component.scss
+++ b/projects/ngx-property-editor/src/lib/components/input/select-input/select-input.component.scss
@@ -0,0 +1,4 @@
+select.form-select.readonly {
+  background-color: inherit;
+  opacity: inherit;
+}
diff --git a/projects/ngx-property-editor/src/lib/components/input/select-input/select-input.component.ts b/projects/ngx-property-editor/src/lib/components/input/select-input/select-input.component.ts
index a1b5747..31a7c10 100644
--- a/projects/ngx-property-editor/src/lib/components/input/select-input/select-input.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/select-input/select-input.component.ts
@@ -9,12 +9,12 @@ import { InputBaseWithValueAndDataSource } from '../input-base';
 export class SelectInputComponent extends InputBaseWithValueAndDataSource<any | any[]> {
 
   /** If true, multiple items can be selected. */
-  @Input() multiple: boolean = false;
+  @Input() public multiple: boolean = false;
 
   /** If true, an additional empty item is added to enable empty selection (`value == undefined`). */
-  @Input() allowEmpty: boolean = false;
+  @Input() public allowEmpty: boolean = false;
 
-  constructor() {
+  public constructor() {
     super();
   }
 
diff --git a/projects/ngx-property-editor/src/lib/components/input/single-radio-input/single-radio-input.component.ts b/projects/ngx-property-editor/src/lib/components/input/single-radio-input/single-radio-input.component.ts
index 0530af3..fd27f86 100644
--- a/projects/ngx-property-editor/src/lib/components/input/single-radio-input/single-radio-input.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/single-radio-input/single-radio-input.component.ts
@@ -12,12 +12,12 @@ export class SingleRadioInputComponent extends InputBaseWithValueAndDataSource<a
    * The value of this one radio input which will be assigned to `value`,
    * if this one radio input is selected.
    */
-  @Input() option: any = undefined;
+  @Input() public option: any = undefined;
 
   /** If true, the radio input is displayed inline. */
-  @Input() inline: boolean = false;
+  @Input() public inline: boolean = false;
 
-  constructor() {
+  public constructor() {
     super();
   }
 
diff --git a/projects/ngx-property-editor/src/lib/components/input/text-area-input/text-area-input.component.ts b/projects/ngx-property-editor/src/lib/components/input/text-area-input/text-area-input.component.ts
index f6454c4..98125f5 100644
--- a/projects/ngx-property-editor/src/lib/components/input/text-area-input/text-area-input.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/text-area-input/text-area-input.component.ts
@@ -9,9 +9,9 @@ import { InputBaseWithValue } from '../input-base';
 export class TextAreaInputComponent extends InputBaseWithValue<string> {
 
   /** Height of the textarea element (number of rows; HTML textarea attribute "rows"). */
-  @Input() height: number | undefined = undefined;
+  @Input() public height: number | undefined = undefined;
 
-  constructor() {
+  public constructor() {
     super();
   }
 
diff --git a/projects/ngx-property-editor/src/lib/components/input/text-input/text-input.component.ts b/projects/ngx-property-editor/src/lib/components/input/text-input/text-input.component.ts
index 1986fce..af2b396 100644
--- a/projects/ngx-property-editor/src/lib/components/input/text-input/text-input.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/input/text-input/text-input.component.ts
@@ -9,7 +9,7 @@ import { InputBaseWithValue } from '../input-base';
 export class TextInputComponent extends InputBaseWithValue<string> {
 
   /** Defines the type of the HTML input element. Default: 'text'. */
-  @Input() type:
+  @Input() public type:
     /** Defines a color picker. */
     'color' |
     /** Defines a field for an e-mail address. */
@@ -28,9 +28,9 @@ export class TextInputComponent extends InputBaseWithValue<string> {
   /**
    * If true, the entered text is automatically trimmed after each change event (enter or focus left).
    */
-  @Input() trimValue: boolean = false;
+  @Input() public trimValue: boolean = false;
 
-  constructor() {
+  public constructor() {
     super();
   }
 
diff --git a/projects/ngx-property-editor/src/lib/components/property-views/property-configuration.ts b/projects/ngx-property-editor/src/lib/components/property-views/property-configuration.ts
index 00a5602..36020ea 100644
--- a/projects/ngx-property-editor/src/lib/components/property-views/property-configuration.ts
+++ b/projects/ngx-property-editor/src/lib/components/property-views/property-configuration.ts
@@ -128,7 +128,7 @@ export class PropertyConfiguration implements PropertyConfigurationType {
 
   public separator?: boolean;
 
-  constructor(configuration?: PropertyConfigurationType) {
+  public constructor(configuration?: PropertyConfigurationType) {
     Object.assign(this, configuration);
   }
 
@@ -310,7 +310,7 @@ export class PropertyConfigurationSeparator extends PropertyConfiguration {
 
   public override readonly separator: boolean = true;
 
-  constructor(configuration?: {
+  public constructor(configuration?: {
     /** If true, this property is hidden. */
     hidden?: boolean,
   }) {
@@ -340,26 +340,28 @@ export function generatePropertyTypeFromData(propertyValue: any): PropertyType |
       if (propertyValue instanceof Date)
         return 'date';
       return undefined;
- 
+
     case 'function':
       try {
         return generatePropertyTypeFromData(propertyValue());
       } catch {
         return undefined;
       }
-  
+
     case 'undefined':
     case 'symbol':
     default:
       return undefined;
-   }
+  }
 }
 
 /**
  * Generates a `PropertiesConfiguration` from the properties of the given data object.
  * @param data A data object to be displayed by a property table or property editor.
+ * @param editable If true, all properties are editable.
  */
-export function generatePropertiesConfigurationFromData(data: any | undefined = undefined): PropertiesConfiguration {
+export function generatePropertiesConfigurationFromData(data: any | undefined = undefined,
+                                                        editable: boolean = false): PropertiesConfiguration {
   if (!data) return [];
 
   return Object.getOwnPropertyNames(data)
@@ -369,6 +371,7 @@ export function generatePropertiesConfigurationFromData(data: any | undefined =
         propertyName: propertyName,
         propertyType: propertyType || 'string',
         hidden: propertyType == undefined,
+        editable: editable,
       });
     });
 }
diff --git a/projects/ngx-property-editor/src/lib/components/property-views/property-editor/property-editor.component.html b/projects/ngx-property-editor/src/lib/components/property-views/property-editor/property-editor.component.html
index e61c7bb..f07f8d4 100644
--- a/projects/ngx-property-editor/src/lib/components/property-views/property-editor/property-editor.component.html
+++ b/projects/ngx-property-editor/src/lib/components/property-views/property-editor/property-editor.component.html
@@ -1,5 +1,5 @@
 <ngb-row *ngIf="data && _configuration"
-     [id]=id>
+         [id]="id">
   <ng-container *ngFor="let row of _configuration; let i = index">
 
     <ng-container *ngIf="row?.separator">
@@ -11,7 +11,8 @@
     <ng-container *ngIf="row && !row?.separator && !row.isHidden(data, !readonly)">
 
       <ngb-col [md]="row.getBootstrapColumnMD(data)">
-        <pe-property-input [configuration]="row"
+        <pe-property-input [id]="id + '-input-' + i"
+                           [configuration]="row"
                            [data]="data"
                            [readonly]="readonly">
         </pe-property-input>
diff --git a/projects/ngx-property-editor/src/lib/components/property-views/property-editor/property-editor.component.ts b/projects/ngx-property-editor/src/lib/components/property-views/property-editor/property-editor.component.ts
index 1fadb67..c48bcfe 100644
--- a/projects/ngx-property-editor/src/lib/components/property-views/property-editor/property-editor.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/property-views/property-editor/property-editor.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { PEGlobalFunctions } from '../../../controller/pe-global-functions';
 import { PropertiesConfiguration, generatePropertiesConfigurationFromData } from '../property-configuration';
 
 @Component({
@@ -9,10 +10,12 @@ import { PropertiesConfiguration, generatePropertiesConfigurationFromData } from
 export class PropertyEditorComponent implements OnChanges {
 
   /** ID attribute of the container element. */
-  @Input() public id: string | undefined = undefined;
+  @Input() public id: string = PEGlobalFunctions.generateRandomId();
 
   /**
    * Configuration of displayed properties including name, data type, displayed value etc.
+   * If undefined, the configuration will be automatically generated from the properties
+   * of the `data` object.
    */
   @Input() public configuration: PropertiesConfiguration | undefined = undefined;
 
@@ -29,11 +32,15 @@ export class PropertyEditorComponent implements OnChanges {
   public ngOnChanges(changes: SimpleChanges): void {
     if (changes.hasOwnProperty('data') || changes.hasOwnProperty('configuration')) {
       this.generateConfiguration();
-    } 
+    }
   }
 
+  /**
+   * Automatically generates a `PropertiesConfiguration` from the properties of the data object,
+   * if no `configuration` is given as input property.
+   */
   private generateConfiguration(): void {
-    this._configuration = this.configuration || generatePropertiesConfigurationFromData(this.data);
+    this._configuration = this.configuration || generatePropertiesConfigurationFromData(this.data, true);
   }
 
 }
diff --git a/projects/ngx-property-editor/src/lib/components/property-views/property-input/property-input.component.ts b/projects/ngx-property-editor/src/lib/components/property-views/property-input/property-input.component.ts
index 87d0a08..d774fbc 100644
--- a/projects/ngx-property-editor/src/lib/components/property-views/property-input/property-input.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/property-views/property-input/property-input.component.ts
@@ -10,19 +10,19 @@ import { PropertyConfiguration } from '../property-configuration';
 export class PropertyInputComponent {
 
   /** ID attribute of the input element. */
-  id: string = PEGlobalFunctions.generateRandomId();
+  @Input() public id: string = PEGlobalFunctions.generateRandomId();
 
   /**
    * Configuration of the displayed property including name, data type, displayed value etc.
    */
-  @Input() configuration: PropertyConfiguration | undefined = undefined;
+  @Input() public configuration: PropertyConfiguration | undefined = undefined;
 
   /**
    * Display a property of this object.
    */
-  @Input() data: any | undefined = undefined;
+  @Input() public data: any | undefined = undefined;
 
   /** If true, the value is displayed as usual (not grey/disabled) but the user cannot change it. */
-  @Input() readonly: boolean = false;
+  @Input() public readonly: boolean = false;
 
 }
diff --git a/projects/ngx-property-editor/src/lib/components/property-views/property-table/property-table.component.ts b/projects/ngx-property-editor/src/lib/components/property-views/property-table/property-table.component.ts
index 217a6e3..fbb6737 100644
--- a/projects/ngx-property-editor/src/lib/components/property-views/property-table/property-table.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/property-views/property-table/property-table.component.ts
@@ -1,5 +1,9 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { PropertiesConfiguration, PropertyConfiguration,generatePropertiesConfigurationFromData } from '../property-configuration';
+import {
+  PropertiesConfiguration,
+  PropertyConfiguration,
+  generatePropertiesConfigurationFromData,
+} from '../property-configuration';
 import { TableData } from '../table-configuration';
 import { PEGlobalFunctions } from '../../../controller/pe-global-functions';
 
@@ -15,30 +19,32 @@ import { PEGlobalFunctions } from '../../../controller/pe-global-functions';
 export class PropertyTableComponent implements OnInit, OnChanges {
 
   /** ID attribute of the table element. */
-  @Input() id: string | undefined = undefined;
+  @Input() public id: string = PEGlobalFunctions.generateRandomId();
 
   /**
    * Configuration of displayed properties including name, data type, displayed value etc.
+   * If undefined, the configuration will be automatically generated from the properties
+   * of the `data` object.
    */
-  @Input() configuration: PropertiesConfiguration = [];
+  @Input() public configuration: PropertiesConfiguration | undefined = undefined;
 
   /**
    * Display the properties of this object.
    */
-  @Input() data: any | undefined = undefined;
+  @Input() public data: any | undefined = undefined;
 
-  tableData: TableData = [];
+  public tableData: TableData = [];
 
-  ngOnInit() {
+  public ngOnInit(): void {
     this.generateTableData();
   }
 
-  ngOnChanges(changes: SimpleChanges) {
+  public ngOnChanges(changes: SimpleChanges): void {
     if (changes.hasOwnProperty('data') || changes.hasOwnProperty('configuration'))
       this.generateTableData();
   }
 
-  private generateTableData() {
+  private generateTableData(): void {
     const config: PropertiesConfiguration = this.configuration?.length ? this.configuration
       : generatePropertiesConfigurationFromData(this.data);
 
diff --git a/projects/ngx-property-editor/src/lib/components/property-views/property-view-and-edit/property-view-and-edit.component.html b/projects/ngx-property-editor/src/lib/components/property-views/property-view-and-edit/property-view-and-edit.component.html
index 41a97c4..42e3e40 100644
--- a/projects/ngx-property-editor/src/lib/components/property-views/property-view-and-edit/property-view-and-edit.component.html
+++ b/projects/ngx-property-editor/src/lib/components/property-views/property-view-and-edit/property-view-and-edit.component.html
@@ -15,7 +15,7 @@
   <div content-both>
 
     <ng-container *ngIf="mode == 'view' && viewModeType == 'table'">
-      <pe-property-table [id]="id ? id + '-property-table' : undefined"
+      <pe-property-table [id]="id + '-property-table'"
                          [configuration]="configuration"
                          [data]="data">
       </pe-property-table>
@@ -26,7 +26,7 @@
     </ng-container>
 
     <ng-container *ngIf="(mode == 'view' && viewModeType == 'editor') || (mode == 'edit' && editModeType == 'editor')">
-      <pe-property-editor [id]="id ? id + '-property-editor' : undefined"
+      <pe-property-editor [id]="id + '-property-editor'"
                           [configuration]="configuration"
                           [data]="data"
                           [readonly]="mode == 'view'">
diff --git a/projects/ngx-property-editor/src/lib/components/property-views/property-view-and-edit/property-view-and-edit.component.ts b/projects/ngx-property-editor/src/lib/components/property-views/property-view-and-edit/property-view-and-edit.component.ts
index 70ba17d..ae97b72 100644
--- a/projects/ngx-property-editor/src/lib/components/property-views/property-view-and-edit/property-view-and-edit.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/property-views/property-view-and-edit/property-view-and-edit.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { PEGlobalFunctions } from '../../../controller/pe-global-functions';
 import { PropertiesConfiguration } from '../property-configuration';
 import { ViewAndEditContainerBaseComponent } from '../view-and-edit-container/view-and-edit-container-base.component';
 
@@ -11,38 +12,40 @@ export const EditModeTypeDefault: EditModeType = 'editor';
 
 
 @Component({
-    selector: 'pe-property-view-and-edit',
-    templateUrl: './property-view-and-edit.component.html',
-    styleUrls: ['./property-view-and-edit.component.scss'],
+  selector: 'pe-property-view-and-edit',
+  templateUrl: './property-view-and-edit.component.html',
+  styleUrls: ['./property-view-and-edit.component.scss'],
 })
 export class PropertyViewAndEditComponent extends ViewAndEditContainerBaseComponent {
 
-    /** ID attribute of the container element. */
-    @Input() id: string | undefined = undefined;
-
-    /**
-     * Configuration of displayed properties including name, data type, displayed value etc.
-     */
-    @Input() configuration: PropertiesConfiguration = [];
-
-    /**
-     * Display the properties of this object.
-     */
-    @Input() data: any | undefined = undefined;
-
-    /**
-     * Choose how the properties are displayed in view mode:
-     * - 'table':  Display properties in a `PropertyTableComponent` (one row per property).
-     * - 'editor': Display same `PropertyEditorComponent` as in edit view but turn input fields to readonly.
-     * - 'custom': Display a custom content passed as `<div content-view-custom>...</div>`.
-     */
-    @Input() viewModeType: ViewModeType = ViewModeTypeDefault;
-
-    /**
-     * Choose how the properties are displayed in edit mode:
-     * - 'editor': Display and edit properties in `PropertyEditorComponent`.
-     * - 'custom': Display a custom content passed as `<div content-edit-custom>...</div>`.
-     */
-    @Input() editModeType: EditModeType = EditModeTypeDefault;
+  /** ID attribute of the container element. */
+  @Input() public id: string = PEGlobalFunctions.generateRandomId();
+
+  /**
+   * Configuration of displayed properties including name, data type, displayed value etc.
+   * If undefined, the configuration will be automatically generated from the properties
+   * of the `data` object.
+   */
+  @Input() public configuration: PropertiesConfiguration | undefined = undefined;
+
+  /**
+   * Display the properties of this object.
+   */
+  @Input() public data: any | undefined = undefined;
+
+  /**
+   * Choose how the properties are displayed in view mode:
+   * - 'table':  Display properties in a `PropertyTableComponent` (one row per property).
+   * - 'editor': Display same `PropertyEditorComponent` as in edit view but turn input fields to readonly.
+   * - 'custom': Display a custom content passed as `<div content-view-custom>...</div>`.
+   */
+  @Input() public viewModeType: ViewModeType = ViewModeTypeDefault;
+
+  /**
+   * Choose how the properties are displayed in edit mode:
+   * - 'editor': Display and edit properties in `PropertyEditorComponent`.
+   * - 'custom': Display a custom content passed as `<div content-edit-custom>...</div>`.
+   */
+  @Input() public editModeType: EditModeType = EditModeTypeDefault;
 
 }
diff --git a/projects/ngx-property-editor/src/lib/components/property-views/table/table.component.ts b/projects/ngx-property-editor/src/lib/components/property-views/table/table.component.ts
index 9f5ca01..870f98c 100644
--- a/projects/ngx-property-editor/src/lib/components/property-views/table/table.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/property-views/table/table.component.ts
@@ -1,9 +1,10 @@
 import { Component, Input } from '@angular/core';
+import { PEGlobalFunctions } from '../../../controller/pe-global-functions';
 import { Stringifier } from '../../../controller/stringifier';
 import { TableData, TableCell } from '../table-configuration';
 
 /**
- * This component builds a HTML table element with bootstrap style
+ * This component builds an HTML table element with bootstrap style
  * from an array of table `data`.
  */
 @Component({
@@ -14,14 +15,14 @@ import { TableData, TableCell } from '../table-configuration';
 export class TableComponent {
 
   /** ID attribute of the table element. */
-  @Input() id: string | undefined = undefined;
+  @Input() public id: string = PEGlobalFunctions.generateRandomId();
 
   /**
    * This array contains the table header.
    * Each element is a cell of the header row.
    * If empty, no header is displayed.
    */
-  @Input() header: string[] = [];
+  @Input() public header: string[] = [];
 
   /**
    * This two-dimensional array contains the table data.
@@ -34,9 +35,9 @@ export class TableComponent {
    *           If a cell is given as simple string, this style is used.
    * - 'header': The cell is displayed as header (<th>).
    */
-  @Input() data: TableData = [];
+  @Input() public data: TableData = [];
 
-  getContent(cell: TableCell): any {
+  public getContent(cell: TableCell): any {
     if (cell.content == undefined) {
       return '';
     } else if (typeof cell.content === 'boolean') {
diff --git a/projects/ngx-property-editor/src/lib/components/property-views/view-and-edit-container/view-and-edit-container-base.component.ts b/projects/ngx-property-editor/src/lib/components/property-views/view-and-edit-container/view-and-edit-container-base.component.ts
index 981a761..e2f1786 100644
--- a/projects/ngx-property-editor/src/lib/components/property-views/view-and-edit-container/view-and-edit-container-base.component.ts
+++ b/projects/ngx-property-editor/src/lib/components/property-views/view-and-edit-container/view-and-edit-container-base.component.ts
@@ -2,63 +2,78 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ViewAndEditContainerMode } from './view-and-edit-container.component';
 
 @Component({
-    template: '',
+  template: '',
 })
 export abstract class ViewAndEditContainerBaseComponent {
 
-    /** Select initial view or edit mode. */
-    @Input() mode: ViewAndEditContainerMode = 'view';
-    /** Event is emitted when the view or edit mode changed. */
-    @Output() readonly modeChange: EventEmitter<ViewAndEditContainerMode> = new EventEmitter<ViewAndEditContainerMode>();
+  /** Select initial view or edit mode. */
+  @Input() public mode: ViewAndEditContainerMode = 'view';
+  /** Event is emitted when the view or edit mode changed. */
+  @Output() public readonly modeChange: EventEmitter<ViewAndEditContainerMode> = new EventEmitter<ViewAndEditContainerMode>();
 
-    /**
-     * Only in view mode:
-     * If true, the edit button is displayed.
-     */
-    @Input() showEditButton: boolean = true;
+  /**
+   * Only in view mode:
+   * If true, the edit button is displayed.
+   */
+  @Input() public showEditButton: boolean = true;
+  /**
+   * Only in edit mode:
+   * If true, the save button is displayed.
+   */
+  @Input() public showSaveButton: boolean = true;
+  /**
+   * Only in edit mode:
+   * If true, the delete button is displayed.
+   */
+  @Input() public showDeleteButton: boolean = false;
+  /**
+   * Only in edit mode:
+   * If true, the cancel button is displayed.
+   */
+  @Input() public showCancelButton: boolean = true;
 
-    /**
-     * Only in edit mode:
-     * If true, the save button is displayed.
-     */
-    @Input() showSaveButton: boolean = true;
-    /**
-     * Only in edit mode:
-     * If true, the delete button is displayed.
-     */
-    @Input() showDeleteButton: boolean = false;
-    /**
-     * Only in edit mode:
-     * If true, the cancel button is displayed.
-     */
-    @Input() showCancelButton: boolean = true;
+  /**
+   * Only in view mode and if `showEditButton` is true:
+   * Text displayed on the edit button.
+   */
+  @Input() public editButtonText: string = 'Bearbeiten';
+  /**
+   * Only in edit mode and if `showSaveButton` is true:
+   * Text displayed on the save button.
+   */
+  @Input() public saveButtonText: string = 'Speichern';
+  /**
+   * Only in edit mode and if `showDeleteButton` is true:
+   * Text displayed on the delete button.
+   */
+  @Input() public deleteButtonText: string = 'Löschen';
+  /**
+   * Only in edit mode and if `showCancelButton` is true:
+   * Text displayed on the cancel button.
+   */
+  @Input() public cancelButtonText: string = 'Abbrechen';
 
-    @Input() editButtonText: string = 'Bearbeiten';
-    @Input() saveButtonText: string = 'Speichern';
-    @Input() deleteButtonText: string = 'Löschen';
-    @Input() cancelButtonText: string = 'Abbrechen';  
+  /**
+   * If true, in view mode only the edit button (and the card header, if `displayAsCard`) is displayed.
+   * In edit mode, the content is still displayed.
+   */
+  @Input() public hideContentInViewMode: boolean = false;
 
-    /**
-     * If true, in view mode only the edit button (and the card header, if `displayAsCard`) is displayed.
-     * In edit mode, the content is still displayed.
-     */
-    @Input() hideContentInViewMode: boolean = false;
+  /**
+   * Content is displayed if
+   * - `mode == 'view'` and `hideContentInViewMode == false`.
+   * - `mode == 'edit'`.
+   */
+  public get showContent(): boolean {
+    return this.mode != 'view' || !this.hideContentInViewMode;
+  }
 
-    /**
-     * Content is displayed if
-     * - `mode == 'view'` and `hideContentInViewMode == false`.
-     * - `mode == 'edit'`.
-     */
-    get showContent(): boolean {
-        return this.mode != 'view' || !this.hideContentInViewMode;
-    }
+  @Input() public displayAsCard: boolean = false;
+  @Input() public cardHeader: string | undefined = undefined;
 
-    @Input() displayAsCard: boolean = false;
-    @Input() cardHeader: string | undefined = undefined;
-
-    @Output() readonly editClick: EventEmitter<void> = new EventEmitter<void>();
-    @Output() readonly saveClick: EventEmitter<void> = new EventEmitter<void>();
-    @Output() readonly deleteClick: EventEmitter<void> = new EventEmitter<void>();
-    @Output() readonly cancelClick: EventEmitter<void> = new EventEmitter<void>();
+  @Output() public readonly editClick: EventEmitter<void> = new EventEmitter<void>();
+  @Output() public readonly saveClick: EventEmitter<void> = new EventEmitter<void>();
+  @Output() public readonly deleteClick: EventEmitter<void> = new EventEmitter<void>();
+  @Output() public readonly cancelClick: EventEmitter<void> = new EventEmitter<void>();
 
 }
diff --git a/projects/ngx-property-editor/src/lib/controller/stringifier.spec.ts b/projects/ngx-property-editor/src/lib/controller/stringifier.spec.ts
index 5c96696..45bc0a0 100644
--- a/projects/ngx-property-editor/src/lib/controller/stringifier.spec.ts
+++ b/projects/ngx-property-editor/src/lib/controller/stringifier.spec.ts
@@ -4,7 +4,7 @@ describe('Stringifier', () => {
 
   // Use german locale for testing
   Object.defineProperty(navigator, 'language', {
-    get: function () {
+    get: function (): string {
       return 'de';
     },
   });