<aspect-button
    *ngIf="elementModel.type === 'button'"
    #elementComponent
    [class.hide-navigation]="!(elementModel | cast: ButtonElement |
                            isEnabledNavigationTarget: navigationService.enabledNavigationTargets.value)"
    [elementModel]="elementModel | cast: ButtonElement"
    (buttonActionEvent)="applyButtonAction($event)">
</aspect-button>
<aspect-image
    *ngIf="elementModel.type === 'image'"
    #elementComponent
    [elementModel]="elementModel | cast: ImageElement"
    (elementValueChanged)="changeElementCodeValue($event)">
</aspect-image>
<aspect-math-table
  *ngIf="elementModel.type === 'math-table'"
  #elementComponent
  [elementModel]="elementModel | cast: MathTableElement"
  [tableModel]="tableModel"
  (onKeyDown)="detectHardwareKeyboard();"
  (focusChanged)="toggleKeyInput($event)"
  (elementValueChanged)="changeElementCodeValue($event)">
</aspect-math-table>
<aspect-trigger
  *ngIf="elementModel.type === 'trigger'"
  #elementComponent
  [elementModel]="elementModel | cast: TriggerElement"
  (triggerActionEvent)="applyTriggerAction($event)"
  aspectInViewDetection
  detectionType="top"
  (intersecting)="elementComponent.emitEvent()">>
</aspect-trigger>
<aspect-marking-panel
  *ngIf="elementModel.type === 'marking-panel'"
  #elementComponent
  [hasDeleteButton]="hasDeleteButton"
  [selectedColor]="selectedColor"
  [elementModel]="elementModel | cast: MarkingPanelElement"
  (markingPanelMarkingDataChanged)="markingPanelService.broadcastMarkingData($event)">
</aspect-marking-panel>

<aspect-floating-keypad
  [isKeypadOpen]="isKeypadOpen && keypadService.position === 'floating'">
</aspect-floating-keypad>