Property Editors: AngularJS to Web Components Migration

The most visible breaking change in Umbraco v14: all custom AngularJS property editors stop working. Every custom property editor must be rewritten as a Web Component using Lit and TypeScript.

Migration Pattern

Old: AngularJS Property Editor (v13)

angular.module("umbraco").controller("MyPropertyEditor", function ($scope) {
    $scope.model.value = $scope.model.value || "";

    $scope.updateValue = function(newValue) {
        $scope.model.value = newValue;
    };
});

New: Web Component Property Editor (v14+)

import { LitElement, html, css, customElement, property } from "@umbraco-cms/backoffice/external/lit";
import { UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/extension-registry";

@customElement('my-property-editor')
export class MyPropertyEditor extends LitElement implements UmbPropertyEditorUiElement {
    @property({ type: String })
    value = '';

    render() {
        return html`
            <input
                type="text"
                .value=${this.value}
                @input=${this.#onInput}
            />
        `;
    }

    #onInput(e: Event) {
        this.value = (e.target as HTMLInputElement).value;
        this.dispatchEvent(new CustomEvent('property-value-change'));
    }

    static styles = css`
        input {
            width: 100%;
            padding: 8px;
        }
    `;
}

Effort Estimates

Budget the following per property editor:

• Simple property editors (text input, toggle, dropdown): 4-8 hours
• Complex property editors (state management, external API integration): 16-24 hours

Built-In Property Editors Migrated

All core property editors were migrated to Web Components by the Umbraco team:

• Block List (component-based content)
• Block Grid (layout-based content)
• Media Picker (image/file selection)
• Rich Text Editor (TinyMCE integration)
• Content Picker (link to other content)

Community packages: Many popular packages required updates. Check compatibility before migrating.