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

# Class: TreeComponent\<Data\>

Defined in: [tree/src/lib/tree.component.ts:90](https://gitlab.com/rxap/packages/-/blob/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/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/15b5fab8912b1042ea325e7f4d98844416018df1/packages/angular/tree/src/lib/tree.component.ts#L249)

#### Returns

`void`