To establish two-way communication between a custom Angular component and the main page in Creatio Freedom UI, use a shared attribute, @Input() / @Output() decorators, and standard binding patterns.

1. Define the shared attribute on the page

In your page schema, create an attribute that will hold the data structure shared between the component and the page:

"TransferAttribute": { 
  "value": { 
    "listValue": [] 
  }
}

2. Bind the attribute to your component in schema diff

{
  "operation": "insert",
  "name": "CustomComponent",
  "values": {
    "value": "$TransferAttribute",
    "type": "usr.Component"
  },
  "parentName": "ParentName",
  "propertyName": "items",
  "index": 0
}

• value binds the page attribute to the component.
• type should be the name of your registered component.

3. Create a DTO interface in your component

Define a TypeScript interface to describe the payload being transferred:

export interface MyPayload {
  listValue: any[];
}

4. Import CrtInput and CrtOutput from @creatio-devkit/common

import { CrtInput, CrtOutput } from '@creatio-devkit/common';

5. Import EventEmitter, Input, Output from @angular/core

import {EventEmitter, Input, Output } from '@angular/core';

6. Implement @Input() and @Output() in the Angular component

Bind the value and prepare it to emit updates:

@Input()
@CrtInput()
value: MyPayload = { listValue: [] };

@Output()
@CrtOutput()
valueChange = new EventEmitter<MyPayload>();

7. Emit updated data to the main page

When you update the value inside the component: