frontend/config/tree.component.html

<div *ngIf="node['path'] == '/'">
    <!-- recursion - show children -->
    <div class="node">
        <tree-indent [node]="node" [indentation]="indentation" [type]="'root'"></tree-indent>
    </div>
    <div class="children" *ngIf="node['children'] || node['newChildren']">
        <ng-container *ngFor="let child of node['children']">
            <tree-view [node]="child"></tree-view>
        </ng-container>
        <ng-container *ngFor="let child of newChildrenToShow(node)">
            <tree-view [node]="child"></tree-view>
        </ng-container>
    </div>

    <!-- create new child dialog -->
    <tree-create [node]="node" [indentation]="indentation"></tree-create>
</div>
<div class="subtree" *ngIf="node['path'] != '/' && (node['info']['config'] || activeSession.statusVisibility)"
    [class.status]="!node['info']['config']">

	<div class="node" [class.dirty]="node['dirty']" [class.deleted]="node['deleted']">
		<tree-indent [node]="node" [indentation]="indentation"></tree-indent>
		<img class="icon" src="assets/netopeer/icons/info.svg" alt="info" title="{{node['info']['dsc']}}"
			onmouseover="this.src='assets/netopeer/icons/info_active.svg'"
			onmouseout="this.src='assets/netopeer/icons/info.svg'"/>

		<!-- BEGIN nodetype-specific code -->
		<!-- leaf -->
		<ng-container *ngIf="node['info']['type'] == 4">
			<ng-container *ngIf="node['info']['key']">
				<img class="icon" src="assets/netopeer/icons/key.svg" alt="key" title="list key"/>
			</ng-container>
			<ng-container *ngIf="node['info']['config'] && !node['deleted'] && (!node['info']['key'] || node['new']) && node['info']['datatypebase'] != 'empty'">
				<img *ngIf="!node['edit']" class="icon_action" src="assets/netopeer/icons/edit.svg"
					alt="edit" title="edit value" tabindex=0
					(click)="startEditing(node, $event.target);" (keyup.enter)="startEditing(node, $event.target);"
					onmouseover="this.src='assets/netopeer/icons/edit_active.svg'"
					onmouseout="this.src='assets/netopeer/icons/edit.svg'"/>
				<img *ngIf="node['edit']" class="icon" src="assets/netopeer/icons/edit.svg" alt="edit" title="editing value"/>
			</ng-container>
		</ng-container>

		<!-- container and lists -->
		<ng-container *ngIf="!node['new'] && !node['deleted'] && ((node['info']['type'] == 16 || node['info']['type'] == 1)) && expandable(node)">
            <img *ngIf="hasHiddenChild(node)" (click)="expand(node, true)"
                class="icon_action" src="assets/netopeer/icons/show_all.svg"
                onmouseover="this.src='assets/netopeer/icons/show_all_active.svg'"
                onmouseout="this.src='assets/netopeer/icons/show_all.svg'" alt="show-all" title="expand subtree"/>
            <img *ngIf="!node['children']" (click)="expand(node, false)"
                class="icon_action" src="assets/netopeer/icons/show_children.svg"
                onmouseover="this.src='assets/netopeer/icons/show_children_active.svg'"
                onmouseout="this.src='assets/netopeer/icons/show_children.svg'" alt="show-children" title="expand children"/>
            <img *ngIf="node['children']" (click)="collapse(node)"
                class="icon_action" src="assets/netopeer/icons/collapse.svg"  alt="collapse" title="collapse"
                onmouseover="this.src='assets/netopeer/icons/collapse_active.svg'"
                onmouseout="this.src='assets/netopeer/icons/collapse.svg'"/>
		</ng-container>

        <div><span class="node_name">{{node['info']['name']}}</span>
            <!-- list's keys -->
			<span *ngIf="node['info']['type'] == 16" class="node_info">* [{{node['keys']}}]</span>

			<!-- leaf and leaflists -->
			<span *ngIf="node['info']['type'] == 8 || node['info']['type'] == 4">:</span>
		</div>

        <!-- leaf -->
		<ng-container *ngIf="node['info']['type'] == 4">
			<div class="value" *ngIf="!node['edit']" (click)="startEditing(node, $event.target);">{{node['value']}}</div>
			<div class="value" *ngIf="node['edit']">{{node['info']['datatype']}}
				<span *ngIf="node['info']['datatype'] != node['info']['datatypebase']">({{node['info']['datatypebase']}})</span>
			</div>
		</ng-container>
		<!-- END nodetype-specific code -->

		<div class="module_name">{{node['info']['module']}}</div>
	</div>

	<!-- BEGIN nodetype-specific code -->
	<!-- leaf's edit value -->
	<ng-container *ngIf="node['info']['type'] == 4">
		<div class="node_edit" [class.dirty]="node['dirty']" *ngIf="node['edit']">
            <tree-indent [node]="node" [indentation]="inheritIndentation(node)" [type]="'edit'"></tree-indent>
			<img *ngIf="node['edit'] " class="icon_action" src="assets/netopeer/icons/close.svg"
				alt="cancel" title="cancel editing" tabindex=0
				(click)="node['edit']=false" (keyup.enter)="node['edit']=false"
				onmouseover="this.src='assets/netopeer/icons/close_active.svg'"
				onmouseout="this.src='assets/netopeer/icons/close.svg'" />
			<img *ngIf="node['edit']" class="icon_action icon_hidden" src="assets/netopeer/icons/confirm.svg"
				id="{{node['path']}}_value_confirm" alt="done" title="store changes" tabindex=0
				(click)="changeValue(node, $event.target)" (keyup.enter)="changeValue(node, $event.target)"
				onmouseover="this.src='assets/netopeer/icons/confirm_active.svg'"
				onmouseout="this.src='assets/netopeer/icons/confirm.svg'"/>
			<input id="{{node['path']}}_input" type="text" class="value" value="{{node['value']}}" tabindex=0
				(keyup)="checkValue(node, $event.target)" (change)="checkValue(node, $event.target)"
				(keyup.enter)="changeValue(node, $event.target)" (keyup.escape)="changeValueCancel(node)"
				checkLeafValue [node]="node" (onCheckValue)="checkValue($event.node, $event.element)"/>
		</div>
	</ng-container>

	<!-- leaflist's values -->
	<ng-container *ngIf="node['info']['type'] == 8">
		<div class="node" *ngFor="let value of node['value']">
            <tree-indent [node]="node" [indentation]="inheritIndentation(node)" [type]="'value'" ></tree-indent>
			<div class="value_standalone">{{value}}</div>
		</div>
	</ng-container>
	<!-- END nodetype-specific code -->

	<!-- recursion - show children -->
    <div class="loading" *ngIf="node['loading']">
        <netopeer-loading></netopeer-loading>
    </div>
    <div class="children" *ngIf="(node['children'] || node['newChildren']) && !node['deleted']">
        <ng-container *ngFor="let child of node['children']">
            <tree-view [node]="child" [indentation]="inheritIndentation(node)"></tree-view>
        </ng-container>
        <ng-container *ngFor="let child of newChildrenToShow(node)">
            <tree-view [node]="child" [indentation]="inheritIndentation(node)"></tree-view>
        </ng-container>
    </div>

    <!-- create new child dialog -->
    <tree-create [node]="node" [indentation]="inheritIndentation(node)"></tree-create>
</div>