PropertyPanelComponent

Import it from @grafloria/angular.

Property panel component for editing diagram node properties. Displays editable properties based on PropertySchema.

Features:

Schema-driven dynamic rendering
Multi-node editing with mixed value detection
Validation with inline error display
Conditional property visibility
Collapsible property groups
Immediate and deferred update modes
Responsive design
WCAG 2.1 Level AA accessible

ts
@Component({
    selector: 'diagram-property-panel',
    imports: [CommonModule, PropertyEditorComponent],
    templateUrl: './property-panel.component.html',
    styleUrls: ['./property-panel.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class PropertyPanelComponent implements OnInit, OnDestroy

Use it as <diagram-property-panel> in a template.

Inputs

Name	Type	Description
`updateMode?`	`'immediate' \| 'deferred'`	Update mode: 'immediate' or 'deferred'.
`showHeader?`		Show header section with node info.
`showActions?`		Show actions menu (delete, duplicate, etc.).
`collapsibleGroups?`		Enable collapsible groups.
`headerTemplate?`	`TemplateRef<any>`	Custom header template.
`emptyStateTemplate?`	`TemplateRef<any>`	Custom empty state template.
`groupHeaderTemplate?`	`TemplateRef<any>`	Custom group header template.

Outputs

propertyChanged — Emitted when property value changes.
validationError — Emitted when validation error occurs.
save — Emitted when Save button clicked (deferred mode).
cancel — Emitted when Cancel button clicked (deferred mode).

Properties

Name	Type	Default	Description
`updateMode`	`'immediate' \| 'deferred'`	`'immediate'`	Update mode: 'immediate' or 'deferred'. - immediate: Changes applied on every keystroke - deferred: Changes applied only when Save button clicked
`showHeader`		`true`	Show header section with node info.
`showActions`		`false`	Show actions menu (delete, duplicate, etc.).
`collapsibleGroups`		`true`	Enable collapsible groups.
`headerTemplate?`	`TemplateRef<any>`		Custom header template.
`emptyStateTemplate?`	`TemplateRef<any>`		Custom empty state template.
`groupHeaderTemplate?`	`TemplateRef<any>`		Custom group header template.
`propertyChanged`			Emitted when property value changes.
`validationError`			Emitted when validation error occurs.
`save`			Emitted when Save button clicked (deferred mode).
`cancel`			Emitted when Cancel button clicked (deferred mode).
`schema`	`PropertySchema \| null`	`null`
`propertyGroups`	`Map<string, PropertyDefinition[]>`
`expandedGroups`
`propertyValues`
`propertyErrors`
`isDirty`		`false`

Methods

@Input() set selectedNodes(nodes: PropertyDiagramNode | PropertyDiagramNode[] | null) — Selected node(s) to edit. Can be single node or array for multi-node editing.
get selectedNodes(): PropertyDiagramNode[] — Selected node(s) to edit. Can be single node or array for multi-node editing.
constructor( private propertyPanelService: PropertyPanelService, private changeDetectorRef: ChangeDetectorRef )
ngOnInit(): void
ngOnDestroy(): void
onPropertyChange(property: PropertyDefinition, newValue: any): void — Handle property value change.
isPropertyVisible(property: PropertyDefinition): boolean — Check if property should be visible.
hasMixedValues(property: PropertyDefinition): boolean — Check if property has mixed values (multi-node editing).
getPropertyValue(property: PropertyDefinition): any — Get property value or placeholder.
getPropertyErrors(property: PropertyDefinition): string[] — Get validation errors for property.
toggleGroup(groupName: string): void — Toggle group expand/collapse.
isGroupExpanded(groupName: string): boolean — Check if group is expanded.
onSave(): void — Save changes (deferred mode).
onCancel(): void — Cancel changes (deferred mode).
trackByGroupName(index: number, entry: { key: string; value: PropertyDefinition[] }): string — Track by function for property groups (performance optimization).
trackByPropertyKey(index: number, property: PropertyDefinition): string — Track by function for properties (performance optimization).

Example

html
<diagram-property-panel
  [selectedNodes]="selectedNodes"
  [updateMode]="'immediate'"
  [showHeader]="true"
  (propertyChanged)="onPropertyChange($event)">
</diagram-property-panel>

Was this page helpful?