Change Indent in Angular TreeView

Created: 13 Oct 2017

In general, TreeView component has a preset indentation to some small value. This makes each parent and child items to have a small horizontal distance for all levels in tree hierarchy. In most cases, this is acceptable, however when you have tree items with larger icons or custom content, you may need to increase or decrease the indentation. In this article, you will learn how to change the indent value in IntegralUI TreeView component for Angular.

By changing the indent value from numeric control on the right, you can immediately see how horizontal space between each item in tree hierarchy changes. By setting this value to 0, all items will appear aligned and tree hierarchy will appear as flat list.

How to Set Item Indent in Angular TreeView

By default, the indent value in IntegralUI TreeView component for Angular is set to 15, which means there is a distance of 15 pixels between parent and child items for all levels in the tree hierarchy.

To change this space, you can use the indent property. This property can accept any numeric value greater than 0. For example:

• HTML5

<iui-treeview [items]="items" [controlStyle]="treeStyle" [indent]="35" [virtualMode]="true" #treeview>
    <ng-template let-item>
        <span [ngClass]="item.icon"></span>
        <span class="trw-cindt-item-label">{{item.text}}</span>
    </ng-template>
</iui-treeview>
                            

Note Changing indentation is applied to all items. If you want to increase or decrease the distance for specific item, you can still do that by setting a custom CSS style for that item.

How to Remove Indentation in Angular TreeView

To remove indentation in the TreeView component, simply set the indent value to 0. This will remove any horizontal space between items and they will all appear aligned with top root item.

A TreeView without indentation is useful if you want to display an expandable flat list. In this way, TreeView can act as multi-level or nested Accordion. You can further modify the appearance of parent items, so that they appear as groups.

Conclusion

Changing indentation in IntegralUI TreeView component for Angular is simple. There is a property that allows you to set the horizontal distance between each parent and child item in tree hierarchy. Removing of indentation is also possible. As a result, the TreeView will appear as flat expandable list.

The TreeView component is part of IntegralUI Web.