# Binding the Angular TreeList to Remote Data

You can bind the [Angular TreeList](https://www.telerik.com/kendo-angular-ui/components/treelist) to server-side (remote) data and display the data in tabular form. This approach is suitable for scenarios that involve remote data services and server-side data operations.

The Kendo Angular TreeList has representational functionality and isn't affected by the way how the data gets updated and where it comes from. This allows you to use any remote data source. Once the data is received from the server, it can be loaded in two ways. Choose the appropriate approach based on the specific configuration requirements:

* [Use manual binding through the `data` property](https://www.telerik.com/kendo-angular-ui/components/treelist/data-binding/remote-data#manual-data-management)—Provides more control when implementing data operations.
* [Provide a custom data-binding directive](https://www.telerik.com/kendo-angular-ui/components/treelist/data-binding/remote-data#using-a-remote-binding-directive)—Suitable for abstracting away the communication with the remote data service.

## Manual Data Management

The manual data management approach is suitable for simple scenarios that require a straightforward binding of the TreeList to remote data. This approach requires more boilerplate code compared to using a custom directive, but it provides more control over the data operations and the communication with the server.

The following example demonstrates how to bind the TreeList to remote data.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/data-binding/remote/source.txt)

The following step-by-step guide shows how to bind the TreeList to remote data:

1. Initialize the root data as an observable that resolves asynchronously.

   ```ts
   public rootData: Observable<SupplyChainNode[]>;

   public ngOnInit(): void {
       this.rootData = of(supplyChain.filter((n) => n.parentId === null)).pipe(delay(600));
   }
   ```

2. Set the [`data`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#data) input property to the observable and pipe it through the `async` pipe.

   ```html
   <kendo-treelist
       [data]="rootData | async"
       [fetchChildren]="fetchChildren"
       [hasChildren]="hasChildren"
   >
       <kendo-treelist-column [expandable]="true" field="name" title="Name"></kendo-treelist-column>
       ...
   </kendo-treelist>
   ```

3. To retrieve the child nodes of a particular node, return an observable in the [`fetchChildren`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#fetchchildren) callback.

   ```ts
   public fetchChildren = (node: SupplyChainNode): Observable<SupplyChainNode[]> => {
       return of(supplyChain.filter((n) => n.parentId === node.id)).pipe(delay(400));
   };
   ```

4. Declare a [`hasChildren`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#haschildren) function that checks if a node is expandable.

   ```ts
   public hasChildren = (node: SupplyChainNode): boolean => {
       return supplyChain.some((n) => n.parentId === node.id);
   };
   ```

## Using a Remote-Binding Directive

The remote data-binding directive abstracts away the communication between the TreeList and the remote data service. This approach is suitable for scenarios that require a more complex configuration of the data operations or when you want to reuse the same data-binding logic across multiple TreeLists in the application.

The following example demonstrates how to create a custom directive for remote data binding.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/data-binding/custom-directive/source.txt)

The following step-by-step guide shows how to create a remote data-binding directive.

1. Create an Angular service to encapsulate the logic for fetching the data.

   ```ts
   @Injectable()
   export class SupplyChainService {
       public getRoots(): Observable<SupplyChainNode[]> {
           return of(supplyChain.filter((n) => n.parentId === null)).pipe(delay(600));
       }

       public getChildren(parentId: number): Observable<SupplyChainNode[]> {
           return of(supplyChain.filter((n) => n.parentId === parentId)).pipe(delay(400));
       }

       public hasChildren(node: SupplyChainNode): boolean {
           return supplyChain.some((n) => n.parentId === node.id);
       }
   }
   ```

2. Create a custom directive and use dependency injection to provide the instance of the `SupplyChainService` and the `TreeListComponent`. Declare the `fetchChildren` and `hasChildren` callback functions.

   ```ts
   @Directive({
       selector: '[supplyChainBinding]',
       standalone: true,
       providers: [SupplyChainService],
   })
   export class SupplyChainBindingDirective implements OnInit {
       constructor(
           private service: SupplyChainService,
           private treelist: TreeListComponent
       ) {}

       public fetchChildren = (node: SupplyChainNode): Observable<SupplyChainNode[]> => {
           return this.service.getChildren(node.id);
       };

       public hasChildren = (node: SupplyChainNode): boolean => {
           return this.service.hasChildren(node);
       };
   }
   ```

3. To maintain the `this` reference, hook up the `fetchChildren` and `hasChildren` callbacks by using [`bind()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) inside `OnInit` lifecycle hook. Assign the observable of root nodes to [`data`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#data) property of the TreeList component reference.

   ```ts
   public ngOnInit(): void {
       this.treelist.fetchChildren = this.fetchChildren.bind(this);
       this.treelist.hasChildren = this.hasChildren.bind(this);

       this.treelist.data = this.service.getRoots();
   }
   ```

4. Now you can use the custom directive on the TreeList instance.

   ```html
   <kendo-treelist supplyChainBinding>
       <kendo-treelist-column [expandable]="true" field="name" title="Name"></kendo-treelist-column>
       ...
   </kendo-treelist>
   ```

## Indicating Ongoing Data Operations

You can provide feedback to the user about ongoing data operations by showing loading indicators. The TreeList has a built-in [`loading`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#loading) property that you can set to `true` to display a loading indicator over the component. Additionally, you can use the [Kendo UI for Angular Loader](https://www.telerik.com/kendo-angular-ui/components/indicators/loader) component to show a more customizable loading indicator.

The following example demonstrates how to integrate the Kendo UI Loader with the TreeList.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/data-binding/remote/loading-indicator/source.txt)

## Suggested Links

* [Binding the TreeList to Local Data](https://www.telerik.com/kendo-angular-ui/components/treelist/data-binding/local-data)
* [API Reference of the TreeListComponent](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent)
* [API Index of the TreeList](https://www.telerik.com/kendo-angular-ui/components/treelist/api)