@rxap/tree/docs/wiki/Class.TreeComponent.md

This package provides a tree component and data source for Angular applications. It includes features such as searching, filtering, and displaying hierarchical data. The package also offers directives for customizing the content of tree nodes.

[@rxap/tree](../wiki/globals) / TreeComponent

# Class: TreeComponent\<Data\>

Defined in: [tree/src/lib/tree.component.ts:90](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L90)

## Type Parameters

• **Data** *extends* `WithIdentifier` & `WithChildren` = `any`

## Implements

- `OnInit`
- `AfterContentInit`

## Constructors

### new TreeComponent()

> **new TreeComponent**\<`Data`\>(`viewContainerRef`, `cdr`, `contentEditableMethod`, `renderer`, `elementRef`, `searchForm`): [`TreeComponent`](../wiki/Class.TreeComponent)\<`Data`\>

Defined in: [tree/src/lib/tree.component.ts:138](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L138)

#### Parameters

##### viewContainerRef

`ViewContainerRef`

##### cdr

`ChangeDetectorRef`

##### contentEditableMethod

`null` | `Method`\<`any`, `null` \| `string`\>

##### renderer

`Renderer2`

##### elementRef

`ElementRef`\<`HTMLElement`\>

##### searchForm

`null` | [`SearchForm`](../wiki/Class.SearchForm)\<`unknown`\>

#### Returns

[`TreeComponent`](../wiki/Class.TreeComponent)\<`Data`\>

## Properties

### content?

> `optional` **content**: [`TreeContentDirective`](../wiki/Class.TreeContentDirective)

Defined in: [tree/src/lib/tree.component.ts:110](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L110)

***

### contentEditableMethod?

> `optional` **contentEditableMethod**: `null` \| `Method`\<`any`, `null` \| `string`\>

Defined in: [tree/src/lib/tree.component.ts:96](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L96)

***

### dataSource

> **dataSource**: [`TreeDataSource`](../wiki/Class.TreeDataSource)\<`Data`\>

Defined in: [tree/src/lib/tree.component.ts:94](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L94)

***

### details

> **details**: `EventEmitter`\<`any`\>

Defined in: [tree/src/lib/tree.component.ts:116](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L116)

***

### dividerOffset

> **dividerOffset**: `string` = `'256px'`

Defined in: [tree/src/lib/tree.component.ts:118](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L118)

***

### getIcon?

> `optional` **getIcon**: `NodeGetIconFunction`\<`any`\>

Defined in: [tree/src/lib/tree.component.ts:100](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L100)

***

### getStyle?

> `optional` **getStyle**: `NodeGetStyleFunction`\<`any`\>

Defined in: [tree/src/lib/tree.component.ts:104](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L104)

***

### getType?

> `optional` **getType**: `NodeGetTypeFunction`\<`any`\>

Defined in: [tree/src/lib/tree.component.ts:102](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L102)

***

### hasDetails?

> `optional` **hasDetails**: `NodeHasDetailsFunction`\<`any`\>

Defined in: [tree/src/lib/tree.component.ts:108](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L108)

***

### hideLeafIcon

> **hideLeafIcon**: `boolean` = `false`

Defined in: [tree/src/lib/tree.component.ts:112](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L112)

***

### id?

> `optional` **id**: `string`

Defined in: [tree/src/lib/tree.component.ts:114](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L114)

***

### multiple

> **multiple**: `boolean` = `false`

Defined in: [tree/src/lib/tree.component.ts:106](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L106)

***

### portal

> **portal**: `null` \| `TemplatePortal`\<`any`\> = `null`

Defined in: [tree/src/lib/tree.component.ts:119](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L119)

***

### searchForm

> `readonly` **searchForm**: `null` \| [`SearchForm`](../wiki/Class.SearchForm)\<`unknown`\>

Defined in: [tree/src/lib/tree.component.ts:150](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L150)

***

### showTreeNavigation

> `readonly` **showTreeNavigation**: `WritableSignal`\<`boolean`\>

Defined in: [tree/src/lib/tree.component.ts:123](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L123)

***

### toDisplay?

> `optional` **toDisplay**: `NodeToDisplayFunction`\<`any`\>

Defined in: [tree/src/lib/tree.component.ts:98](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L98)

***

### treeContainer

> **treeContainer**: `ElementRef`

Defined in: [tree/src/lib/tree.component.ts:121](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L121)

***

### treeControl

> **treeControl**: `FlatTreeControl`\<`Node`\<`Data`, `any`\>\>

Defined in: [tree/src/lib/tree.component.ts:92](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L92)

## Accessors

### cacheId

#### Get Signature

> **get** **cacheId**(): `string`

Defined in: [tree/src/lib/tree.component.ts:160](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L160)

##### Returns

`string`

***

### nodeDisplayEditable

#### Get Signature

> **get** **nodeDisplayEditable**(): `boolean`

Defined in: [tree/src/lib/tree.component.ts:156](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L156)

##### Returns

`boolean`

## Methods

### getLevel()

> **getLevel**(`node`): `number`

Defined in: [tree/src/lib/tree.component.ts:164](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L164)

#### Parameters

##### node

`Node`\<`Data`\>

#### Returns

`number`

***

### hasChild()

> **hasChild**(`_`, `nodeData`): `boolean`

Defined in: [tree/src/lib/tree.component.ts:168](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L168)

#### Parameters

##### \_

`number`

##### nodeData

`Node`\<`Data`\>

#### Returns

`boolean`

***

### isExpandable()

> **isExpandable**(`node`): `boolean`

Defined in: [tree/src/lib/tree.component.ts:166](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L166)

#### Parameters

##### node

`Node`\<`Data`\>

#### Returns

`boolean`

***

### ngAfterContentInit()

> **ngAfterContentInit**(): `void`

Defined in: [tree/src/lib/tree.component.ts:194](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L194)

A callback method that is invoked immediately after
Angular has completed initialization of all of the directive's
content.
It is invoked only once when the directive is instantiated.

#### Returns

`void`

#### Implementation of

`AfterContentInit.ngAfterContentInit`

***

### ngOnInit()

> **ngOnInit**(): `void`

Defined in: [tree/src/lib/tree.component.ts:170](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L170)

A callback method that is invoked immediately after the
default change detector has checked the directive's
data-bound properties for the first time,
and before any of the view or content children have been checked.
It is invoked only once when the directive is instantiated.

#### Returns

`void`

#### Implementation of

`OnInit.ngOnInit`

***

### onContentEditableChange()

> **onContentEditableChange**(`value`, `node`): `any`

Defined in: [tree/src/lib/tree.component.ts:220](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L220)

#### Parameters

##### value

`null` | `string`

##### node

`Node`\<`Data`\>

#### Returns

`any`

***

### onMousedown()

> **onMousedown**(): `void`

Defined in: [tree/src/lib/tree.component.ts:225](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L225)

#### Returns

`void`

***

### onMousemove()

> **onMousemove**(`$event`): `void`

Defined in: [tree/src/lib/tree.component.ts:235](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L235)

#### Parameters

##### $event

`MouseEvent`

#### Returns

`void`

***

### onMouseup()

> **onMouseup**(): `void`

Defined in: [tree/src/lib/tree.component.ts:230](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L230)

#### Returns

`void`

***

### openDetails()

> **openDetails**(`node`): `void`

Defined in: [tree/src/lib/tree.component.ts:205](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L205)

#### Parameters

##### node

`Node`\<`Data`\>

#### Returns

`void`

***

### toggleTreeNavigation()

> **toggleTreeNavigation**(): `void`

Defined in: [tree/src/lib/tree.component.ts:249](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/tree/src/lib/tree.component.ts#L249)

#### Returns

`void`