diff --git a/projects/common/component-utils.ts b/projects/common/component-utils.ts
index 66ef178ba6bac95218c4f06a24c967481a0528a6..535f412b02d06a9bc7a7ad361dffa947c0363059 100644
--- a/projects/common/component-utils.ts
+++ b/projects/common/component-utils.ts
@@ -1,5 +1,4 @@
 import { ComponentFactory, ComponentFactoryResolver } from '@angular/core';
-import { FormElementComponent } from './canvas-element-component.directive';
 import { TextComponent } from './element-components/text.component';
 import { ButtonComponent } from './element-components/button.component';
 import { TextFieldComponent } from './element-components/text-field.component';
@@ -12,9 +11,9 @@ import { VideoComponent } from './element-components/video.component';
 import { CorrectionComponent } from './element-components/compound-components/correction.component';
 
 export function getComponentFactory(
-  elementType: string,
-  componentFactoryResolver: ComponentFactoryResolver
-): ComponentFactory<FormElementComponent> {
+  elementType: string, componentFactoryResolver: ComponentFactoryResolver
+): ComponentFactory<any> {
+  // TODO: Find better solution than any
   switch (elementType) {
     case 'text':
       return componentFactoryResolver.resolveComponentFactory(TextComponent);
diff --git a/projects/common/element-components/audio.component.ts b/projects/common/element-components/audio.component.ts
index 74363e230c35057358f1ddb03cee59b263cd3653..40673b54ad5286167e11b6395aff75c011d6e399 100644
--- a/projects/common/element-components/audio.component.ts
+++ b/projects/common/element-components/audio.component.ts
@@ -1,16 +1,17 @@
 import { Component } from '@angular/core';
-import { FormElementComponent } from '../canvas-element-component.directive';
+import { AudioElement } from '../unit';
 
 @Component({
   selector: 'app-audio',
   template: `
       <div>
-          <audio controls src="{{$any(elementModel).src}}"></audio>
+          <audio controls src="{{elementModel.src}}"></audio>
       </div>
   `,
   styles: [
     'div {display: inline-block; border: 5px solid; padding: 12px 9px 9px 9px;}'
   ]
 })
-export class AudioComponent extends FormElementComponent {
+export class AudioComponent {
+  elementModel!: AudioElement;
 }
diff --git a/projects/common/element-components/button.component.ts b/projects/common/element-components/button.component.ts
index 876e3e3a092d38bc7fb490a082c05930e9d97150..197fdd0ad6838598886475d60dea0cf4af20d025 100644
--- a/projects/common/element-components/button.component.ts
+++ b/projects/common/element-components/button.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormElementComponent } from '../canvas-element-component.directive';
+import { ButtonElement } from '../unit';
 
 @Component({
   selector: 'app-button',
@@ -14,8 +14,10 @@ import { FormElementComponent } from '../canvas-element-component.directive';
             [style.font-weight]="elementModel.bold ? 'bold' : ''"
             [style.font-style]="elementModel.italic ? 'italic' : ''"
             [style.text-decoration]="elementModel.underline ? 'underline' : ''">
-      {{$any(elementModel).label}}
+      {{elementModel.label}}
     </button>
   `
 })
-export class ButtonComponent extends FormElementComponent { }
+export class ButtonComponent {
+  elementModel!: ButtonElement;
+}
diff --git a/projects/common/element-components/checkbox.component.ts b/projects/common/element-components/checkbox.component.ts
index 552b072197c0b0baf4b999c8114515c2add70148..c68db4f508a4614ae89623cdfb73752060718133 100644
--- a/projects/common/element-components/checkbox.component.ts
+++ b/projects/common/element-components/checkbox.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { FormElementComponent } from '../canvas-element-component.directive';
+import { CheckboxElement } from '../unit';
+import { FormElementComponent } from '../form-element-component.directive';
 
 @Component({
   selector: 'app-checkbox',
@@ -15,8 +16,10 @@ import { FormElementComponent } from '../canvas-element-component.directive';
                     [style.font-weight]="elementModel.bold ? 'bold' : ''"
                     [style.font-style]="elementModel.italic ? 'italic' : ''"
                     [style.text-decoration]="elementModel.underline ? 'underline' : ''">
-          {{$any(elementModel).label}}
+          {{elementModel.label}}
       </mat-checkbox>
   `
 })
-export class CheckboxComponent extends FormElementComponent { }
+export class CheckboxComponent extends FormElementComponent {
+  elementModel!: CheckboxElement;
+}
diff --git a/projects/common/element-components/compound-components/correction.component.ts b/projects/common/element-components/compound-components/correction.component.ts
index 7ff85ce435b79ab2db554820771235c3bda0610a..a8743f85d1442883abd1ee039ffd21b6129f5bd0 100644
--- a/projects/common/element-components/compound-components/correction.component.ts
+++ b/projects/common/element-components/compound-components/correction.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { FormElementComponent } from '../../canvas-element-component.directive';
+import { CompoundElementCorrection } from '../../unit';
+import { FormElementComponent } from '../../form-element-component.directive';
 
 @Component({
   selector: 'app-correction',
@@ -8,13 +9,14 @@ import { FormElementComponent } from '../../canvas-element-component.directive';
       <p>
         {{$any(elementModel).text}}
       </p>
-      <div *ngFor="let sentence of $any(elementModel).sentences"
+      <div *ngFor="let sentence of elementModel.sentences"
            fxLayout="column">
         <div fxLayout="row">
           <div *ngFor="let word of sentence.split(' ');"
                fxLayout="column">
               <mat-form-field>
-              <input matInput type="text">
+              <input matInput type="text"
+                     [formControl]="formControl">
               </mat-form-field>
               <div>
                   {{word}}
@@ -28,4 +30,6 @@ import { FormElementComponent } from '../../canvas-element-component.directive';
     'mat-form-field {margin: 5px}'
   ]
 })
-export class CorrectionComponent extends FormElementComponent { }
+export class CorrectionComponent extends FormElementComponent {
+  elementModel!: CompoundElementCorrection;
+}
diff --git a/projects/common/element-components/dropdown.component.ts b/projects/common/element-components/dropdown.component.ts
index 7c56c46579dce4cf8a6d18aeb964e6dbb27de30d..fa6a6544c458be1b7211bd03bc735ceccef1c478 100644
--- a/projects/common/element-components/dropdown.component.ts
+++ b/projects/common/element-components/dropdown.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { FormElementComponent } from '../canvas-element-component.directive';
+import { DropdownElement } from '../unit';
+import { FormElementComponent } from '../form-element-component.directive';
 
 @Component({
   selector: 'app-dropdown',
@@ -17,11 +18,13 @@ import { FormElementComponent } from '../canvas-element-component.directive';
             {{$any(elementModel).label}}
           </mat-label>
           <mat-select [formControl]="formControl">
-              <mat-option *ngFor="let option of $any(elementModel).options" [value]="option">
+              <mat-option *ngFor="let option of elementModel.options" [value]="option">
                   {{option}}
               </mat-option>
           </mat-select>
       </mat-form-field>
   `
 })
-export class DropdownComponent extends FormElementComponent { }
+export class DropdownComponent extends FormElementComponent {
+  elementModel!: DropdownElement;
+}
diff --git a/projects/common/element-components/image.component.ts b/projects/common/element-components/image.component.ts
index ca838ebf23dc55ecaeaa0b305096eb97e46aaf85..ead36c4709019549e20b7df0a104967de68a86d7 100644
--- a/projects/common/element-components/image.component.ts
+++ b/projects/common/element-components/image.component.ts
@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
-import { FormElementComponent } from '../canvas-element-component.directive';
+import { ImageElement } from '../unit';
 
 @Component({
   selector: 'app-image',
   template: `
-      <img src="{{$any(elementModel).src}}" alt="Image Placeholder">
+      <img src="{{elementModel.src}}" alt="Image Placeholder">
   `
 })
-export class ImageComponent extends FormElementComponent { }
+export class ImageComponent {
+  elementModel!: ImageElement;
+}
diff --git a/projects/common/element-components/radio-button-group.component.ts b/projects/common/element-components/radio-button-group.component.ts
index 88bf5c4711e8a00041f151364be47a75c5184aa4..c63d43453b1f0f8ad5beedccbc37ada6cb60bc55 100644
--- a/projects/common/element-components/radio-button-group.component.ts
+++ b/projects/common/element-components/radio-button-group.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { FormElementComponent } from '../canvas-element-component.directive';
+import { RadioButtonGroupElement } from '../unit';
+import { FormElementComponent } from '../form-element-component.directive';
 
 @Component({
   selector: 'app-radio-button-group',
@@ -13,14 +14,16 @@ import { FormElementComponent } from '../canvas-element-component.directive';
            [style.font-weight]="elementModel.bold ? 'bold' : ''"
            [style.font-style]="elementModel.italic ? 'italic' : ''"
            [style.text-decoration]="elementModel.underline ? 'underline' : ''">
-          <label id="radio-group-label">{{$any(elementModel).label}}</label>
+          <label id="radio-group-label">{{elementModel.text}}</label>
           <mat-radio-group aria-labelledby="radio-group-label" fxLayout="{{elementModel.alignment}}"
                            [formControl]="formControl">
-              <mat-radio-button *ngFor="let option of $any(elementModel).options" [value]="option">
+              <mat-radio-button *ngFor="let option of elementModel.options" [value]="option">
                   {{option}}
               </mat-radio-button>
           </mat-radio-group>
       </div>
   `
 })
-export class RadioButtonGroupComponent extends FormElementComponent { }
+export class RadioButtonGroupComponent extends FormElementComponent {
+  elementModel!: RadioButtonGroupElement;
+}
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 7cb6d0617e48cf284dfb17372ea026d1774b4efb..3b4278920e86741a1ec0dacbc12a532f77b8384c 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -1,14 +1,15 @@
 import { Component } from '@angular/core';
-import { FormElementComponent } from '../canvas-element-component.directive';
+import { TextFieldElement } from '../unit';
+import { FormElementComponent } from '../form-element-component.directive';
 
 @Component({
   selector: 'app-text-field',
   template: `
-    <input *ngIf="$any(elementModel).multiline === false" matInput
-           placeholder="{{$any(elementModel).placeholder}}"
+    <input *ngIf="elementModel.multiline === false" matInput
+           placeholder="{{elementModel.placeholder}}"
            [formControl]="formControl">
-    <textarea *ngIf="$any(elementModel).multiline === true" matInput
-              placeholder="{{$any(elementModel).placeholder}}"
+    <textarea *ngIf="elementModel.multiline === true" matInput
+              placeholder="{{elementModel.placeholder}}"
               [formControl]="formControl"
               [style.width.px]="elementModel.width"
               [style.height.px]="elementModel.height"
@@ -22,4 +23,6 @@ import { FormElementComponent } from '../canvas-element-component.directive';
     </textarea>
   `
 })
-export class TextFieldComponent extends FormElementComponent { }
+export class TextFieldComponent extends FormElementComponent {
+  elementModel!: TextFieldElement;
+}
diff --git a/projects/common/element-components/text.component.ts b/projects/common/element-components/text.component.ts
index 754ab8a4c358d3652532d4f2b49933272cf55562..6f292e034632931cfe40e3125f9b5756fa8b2626 100644
--- a/projects/common/element-components/text.component.ts
+++ b/projects/common/element-components/text.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormElementComponent } from '../canvas-element-component.directive';
+import { TextElement } from '../unit';
 
 @Component({
   selector: 'app-text',
@@ -14,8 +14,10 @@ import { FormElementComponent } from '../canvas-element-component.directive';
            [style.font-style]="elementModel.italic ? 'italic' : ''"
            [style.text-decoration]="elementModel.underline ? 'underline' : ''"
            [style.white-space]="'pre-wrap'">
-          {{$any(elementModel).text}}
+          {{elementModel.text}}
       </div>
   `
 })
-export class TextComponent extends FormElementComponent { }
+export class TextComponent {
+  elementModel!: TextElement;
+}
diff --git a/projects/common/element-components/video.component.ts b/projects/common/element-components/video.component.ts
index 6f3177424ec6954314c57ece9d62dfe8adbffa14..4d41b60a5deed78802a49cb7e0de13870fa9b001 100644
--- a/projects/common/element-components/video.component.ts
+++ b/projects/common/element-components/video.component.ts
@@ -1,15 +1,17 @@
 import { Component } from '@angular/core';
-import { FormElementComponent } from '../canvas-element-component.directive';
+import { VideoElement } from '../unit';
 
 @Component({
   selector: 'app-video',
   template: `
       <div>
-          <video controls src="{{$any(elementModel).src}}"></video>
+          <video controls src="{{elementModel.src}}"></video>
       </div>
   `,
   styles: [
     'div {display: inline-block;border: 5px solid; padding: 12px 9px 9px 9px}'
   ]
 })
-export class VideoComponent extends FormElementComponent { }
+export class VideoComponent {
+  elementModel!: VideoElement;
+}
diff --git a/projects/common/canvas-element-component.directive.ts b/projects/common/form-element-component.directive.ts
similarity index 93%
rename from projects/common/canvas-element-component.directive.ts
rename to projects/common/form-element-component.directive.ts
index e18b0903226f46b5f56783398ac1d26e904ef4fd..3811b31ddf32014c2ddd7b8728b2cc0be4aa8876 100644
--- a/projects/common/canvas-element-component.directive.ts
+++ b/projects/common/form-element-component.directive.ts
@@ -7,9 +7,8 @@ import { FormService } from './form.service';
 @Directive()
 export abstract class FormElementComponent implements OnInit {
   elementModel!: UnitUIElement;
-  formControl!: FormControl;
-  style!: Record<string, string>;
   parentForm!: FormGroup;
+  formControl: FormControl = new FormControl();
 
   constructor(private formService: FormService) { }
 
@@ -24,6 +23,7 @@ export abstract class FormElementComponent implements OnInit {
   }
 
   private getFormControl(id: string): FormControl {
+    // workaround for editor
     return (this.parentForm) ? this.parentForm.controls[id] as FormControl : new FormControl();
   }
 
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-drag-overlay.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-drag-overlay.component.ts
index 1f6f8156d151f97b84b80640d930460998e8cd4f..a9b799c02ae529fcc45e9fe894d8c9ff10a6472f 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-drag-overlay.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/canvas-drag-overlay.component.ts
@@ -2,7 +2,7 @@ import {
   Component, OnInit, Input, Output, EventEmitter, ComponentFactoryResolver, ViewChild, ViewContainerRef
 } from '@angular/core';
 import { UnitUIElement } from '../../../../../../../common/unit';
-import { FormElementComponent } from '../../../../../../../common/canvas-element-component.directive';
+import { FormElementComponent } from '../../../../../../../common/form-element-component.directive';
 import * as ComponentUtils from '../../../../../../../common/component-utils';
 
 @Component({
diff --git a/projects/player/src/app/components/element-overlay.component.ts b/projects/player/src/app/components/element-overlay.component.ts
index 6698086ba707e23dbaf3f47c0eac090beb1eebee..44f4e33b917e1c6cce53baa1e0a2b91b7d24b11b 100644
--- a/projects/player/src/app/components/element-overlay.component.ts
+++ b/projects/player/src/app/components/element-overlay.component.ts
@@ -1,10 +1,10 @@
 import {
-  Component, ComponentFactory, ComponentFactoryResolver, Input, OnInit, ViewChild, ViewContainerRef
+  Component, ComponentFactoryResolver, Input, OnInit, ViewChild, ViewContainerRef
 } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { UnitUIElement } from '../../../../common/unit';
-import { FormElementComponent } from '../../../../common/canvas-element-component.directive';
 import * as ComponentUtils from '../../../../common/component-utils';
+import { FormElementComponent } from '../../../../common/form-element-component.directive';
 
 @Component({
   selector: 'app-element-overlay',
@@ -24,11 +24,12 @@ export class ElementOverlayComponent implements OnInit {
   constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
 
   ngOnInit(): void {
-    const componentFactory: ComponentFactory<FormElementComponent> =
-      ComponentUtils.getComponentFactory(this.element.type, this.componentFactoryResolver);
-    const childComponent: FormElementComponent =
-      this.elementContainer.createComponent(componentFactory).instance;
+    const componentFactory = ComponentUtils.getComponentFactory(this.element.type, this.componentFactoryResolver);
+    const childComponent = this.elementContainer.createComponent(componentFactory).instance;
     childComponent.elementModel = this.element;
-    childComponent.parentForm = this.parentForm;
+
+    if (childComponent instanceof FormElementComponent) {
+      childComponent.parentForm = this.parentForm;
+    }
   }
 }