Configuring Block Editor Label Properties

When configuring a block, the label property allows you to define a label for the appearance of the Block in the editor. The label can use AngularJS template string syntax to display values of properties. Example: My Block {{myPropertyAlias}} will be shown as: My Block FooBar.
You can also use more advanced expressions using AngularJS filters. Example: {{myPropertyAlias | limitTo:100}} or for a property using Richtext editor {{myPropertyAlias | ncRichText | truncate:true:100}}.
It is also possible to use properties from the settings model by using {{$settings.propertyAlias}}.
In some cases, you might want to create a fallback label. This can be achieved using the following format: {{myProperty || $contentTypeName}}.
This example will show the name of the ElementType when the value of myProperty is not defined.

Useful Angular filters

As well as the default AngularJS filters, Umbraco ships with some additional filters which are useful for setting the Label field of Block editors.
Property type
Gets the name of a node
Umbraco node
Strips HTML
Richtext editor
AngularJS native truncate
n: maximum length of the string
Umbraco's richer truncate function
wordwise: boolean to indicaste whether to truncate a string mid-word or not max: maximum length of the string tail (optional): string to indicate a truncated string, "" by default
Truncates to a number of words (rather than characters)
n: maximum number of words in string
Converts a string to title case
Joins an array into one string
Array (of string or object)
separator: string used to join values together, e.g. ", " prop (optional): string key indicating which property to join when used on an array of objects

Custom filters

If the filters do not suit your needs, you can create custom filters by creating a plugin in App_Plugins and adding a filter module.
An example package.manifest file is:
"name": "MyFilters",
"version": "1.0.0",
"allowPackageTelemetry": false,
"javascript": [
With myFilter.filter.js containing:
angular.module("umbraco.filters").filter("myFilter", function () {
return function (input, parameter1, parameter2, etc) {
// Apply any custom logic to modify the output value and return a string
return `My filter says: "${input}"`;

Special variables

The 1-based index of this block item in the current block list
The name of the Element Type used for the Block
Provides access to the settings model for the block (if configured)
Provides access to the layout model for the block (columnSpan and rowSpan)