/

Connection Labels

DfConnectionLabel adds text, templates or Angular components to an edge. Labels can be persisted on one connection or supplied as defaults while users create new connections.

Connection labelFinal persisted value for one edge.
Output labelDefault inherited by edges created from that output.
Node labelShared default applied to all outputs in a node.

Define Labels

Label content is Polymorpheus content and optional context is passed through unchanged. Use a typed application object when a template or component exposes controls.

graph-model.ts 

    
      const connection: DfDataConnection = {
  source,
  target,
  label: {
    content: 'Approved',
    context: {status: 'success'},
  },
};

const node: DfDataNode = {
  id: 'review',
  position: {x: 0, y: 0},
  data: {
    type: 'review',
    connectionLabel: {content: 'Needs review'},
  },
};

Precedence

  1. Connectionconnection.label is the stored value rendered for that edge.
  2. Output connector[connectionLabel] is copied during interactive creation.
  3. Node datadata.connectionLabel supplies a fallback to every output.

An output connector label overrides the node-level default. Call setConnectionLabel() on a DfOutputComponent reference when the next created edge needs an imperative override.

Interactive Example

This graph demonstrates text labels and a component label with a copy action. Inspect the source tabs for the model, label component and node template. 

    
      
    

      
      
    

  
    
      import {ChangeDetectionStrategy, Component} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {
    DfArrowhead,
    DfConnectionPoint,
    DfConnectionType,
    type DfDataModel,
    dfPanZoomOptionsProvider,
    NgDrawFlowComponent,
    provideNgDrawFlowConfigs,
} from '@ng-draw-flow/core';
import {TuiAddonDoc} from '@taiga-ui/addon-doc';
import {PolymorpheusComponent} from '@taiga-ui/polymorpheus';

import {LabelNodeComponent, SimpleNodeComponent} from '../../../../app/modules/nodes';
import {CopyComponent} from './labels/copy/copy.component';

@Component({
    standalone: true,
    selector: 'example-component',
    imports: [NgDrawFlowComponent, ReactiveFormsModule, TuiAddonDoc],
    templateUrl: './template.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [
        dfPanZoomOptionsProvider({
            topPosition: null,
            leftPosition: 20,
        }),
        provideNgDrawFlowConfigs({
            connection: {
                type: DfConnectionType.SmoothStep,
                arrowhead: {type: DfArrowhead.ArrowClosed},
                curvature: 10,
            },
            nodes: {
                labelNode: LabelNodeComponent,
                simpleNode: SimpleNodeComponent,
            },
        }),
    ],
})
export default class ExampleComponent {
    public data: DfDataModel = {
        nodes: [
            {
                id: 'node-1',
                data: {type: 'simpleNode', text: 'This base node'},
                position: {x: 0, y: 0},
                startNode: true,
            },
            {
                id: 'node-2',
                data: {type: 'simpleNode', text: 'This child node 1'},
                position: {x: 250, y: 50},
            },
            {
                id: 'node-3',
                data: {type: 'simpleNode', text: 'This child node 2'},
                position: {x: 250, y: -50},
            },
            {
                id: 'node-4',
                data: {type: 'simpleNode', text: 'This child node 3'},
                position: {x: 500, y: 0},
                endNode: true,
            },
            {
                id: 'node-5',
                data: {
                    type: 'simpleNode',
                    text: 'This node creates connections with a label',
                    connectionLabel: {
                        content: new PolymorpheusComponent(CopyComponent),
                        context: 'some text',
                    },
                },
                position: {x: 0, y: -100},
            },
            {
                id: 'node-6',
                data: {
                    type: 'labelNode',
                    text: 'This node defines label content dynamically',
                },
                position: {x: 0, y: 100},
            },
        ],
        connections: [
            {
                source: {
                    nodeId: 'node-1',
                    connectorType: DfConnectionPoint.Output,
                    connectorId: 'node-1-output-1',
                },
                target: {
                    nodeId: 'node-2',
                    connectorType: DfConnectionPoint.Input,
                    connectorId: 'node-2-input-1',
                },
                label: {content: 'Label 1'},
            },
            {
                source: {
                    nodeId: 'node-1',
                    connectorType: DfConnectionPoint.Output,
                    connectorId: 'node-1-output-1',
                },
                target: {
                    nodeId: 'node-3',
                    connectorType: DfConnectionPoint.Input,
                    connectorId: 'node-3-input-1',
                },
                label: {
                    content: new PolymorpheusComponent(CopyComponent),
                    context: 'https://taiga-ui.dev',
                },
            },
            {
                source: {
                    nodeId: 'node-2',
                    connectorType: DfConnectionPoint.Output,
                    connectorId: 'node-2-output-1',
                },
                target: {
                    nodeId: 'node-4',
                    connectorType: DfConnectionPoint.Input,
                    connectorId: 'node-4-input-1',
                },
                label: {content: 'Label 3'},
            },
            {
                source: {
                    nodeId: 'node-3',
                    connectorType: DfConnectionPoint.Output,
                    connectorId: 'node-3-output-1',
                },
                target: {
                    nodeId: 'node-4',
                    connectorType: DfConnectionPoint.Input,
                    connectorId: 'node-4-input-1',
                },
                label: {content: 'Label 4'},
            },
        ],
    };

    public form = new FormControl<DfDataModel>(this.data);
}

    

      
      
    

  
    
      <ng-draw-flow [formControl]="form" />

    

      
      
    

  
    
      import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
import {WA_NAVIGATOR} from '@ng-web-apis/common';
import {TuiIcon} from '@taiga-ui/core';
import {injectContext} from '@taiga-ui/polymorpheus';

@Component({
    standalone: true,
    imports: [TuiIcon],
    template: `
        <div
            class="copy"
            (click)="copy()"
        >
            <tui-icon
                class="copy-icon"
                [class.copied]="copied()"
                [icon]="copied() ? '@tui.check' : '@tui.copy'"
            />
            {{ copied() ? 'Copied' : 'Copy' }}
        </div>
    `,
    styleUrl: './copy.component.less',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CopyComponent {
    private readonly navigator = inject(WA_NAVIGATOR);
    protected readonly context = injectContext<{$implicit: string}>();
    protected copied = signal(false);
    public link = this.context.$implicit;

    protected copy(): void {
        this.navigator.clipboard.writeText(this.link).then(() => {
            this.copied.set(true);
            setTimeout(() => this.copied.set(false), 3000);
        });
    }
}

    

      
      
    

  
    
      import {AsyncPipe} from '@angular/common';
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {DfInputComponent, DfOutputComponent, DrawFlowBaseNode} from '@ng-draw-flow/core';
import {TuiButton} from '@taiga-ui/core';

@Component({
    standalone: true,
    selector: 'app-label-node',
    imports: [AsyncPipe, DfInputComponent, DfOutputComponent, TuiButton],
    templateUrl: './label-node.component.html',
    styleUrl: './label-node.component.less',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LabelNodeComponent extends DrawFlowBaseNode {
    public outputConnectors = [0];

    public addOutputConnector(): void {
        this.outputConnectors.push(this.outputs().length);
    }
}

    

      
      
    

  
    
      <p class="tui-text_body-xs">{{ model.text }}</p>

<div class="output-wrapper">
    @for (output of outputConnectors; track output; let i = $index) {
        <df-output
            class="output"
            [connectionLabel]="{content: i}"
            [connectorData]="{nodeId, connectorId: nodeId + '-output-' + (i + 1), single: false}"
        />
    }
</div>

<button
    size="xs"
    tuiButton
    type="button"
    (click)="addOutputConnector()"
>
    Add output
</button>