### File

`packages/components/eui-tree-list/item-content/item-content.component.ts`

### Description

Content projection component for custom content within eui-tree-list-item. Provides a structured container for rich content beyond simple labels. Applies consistent styling for custom item content. Must be used within eui-tree-list-item to define custom content areas.

### Basic Usage

Example :

    <eui-tree-list-item>
      <eui-tree-list-item-content>
        <eui-icon-svg icon="eui-file" size="s" />
        <span>Document.pdf</span>
        <eui-badge euiInfo>New</eui-badge>
      </eui-tree-list-item-content>
    </eui-tree-list-item>

    <!-- Complex content -->
    <eui-tree-list-item>
      <eui-tree-list-item-content>
        <div class="custom-layout">
          <img src="icon.png" alt="File icon" />
          <div>
            <strong>File Name</strong>
            <small>Last modified: 2 hours ago</small>
          </div>
        </div>
      </eui-tree-list-item-content>
    </eui-tree-list-item>

### Accessibility

- Content should include appropriate semantic HTML
- Images should have alt text
- Interactive elements should be keyboard accessible

### Notes

- Replaces default label rendering when used
- Supports any HTML content or Angular components
- Maintains consistent spacing and alignment
- Works with expand/collapse functionality

### Metadata

selector | `eui-tree-list-item-content`

template

    <ng-content />

### Index

###### Properties

- string

###### HostBindings

- class

### HostBindings

class
Type : `string`
Default value : `'eui-tree-list-item-content'`

### Properties

string
Type : `string`
Default value : `'eui-tree-list-item-content'`
Decorators : `@HostBinding('class')`

# results matching ""

# No results matching ""