frontend/config/tree.component.html

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

    <!-- create new child dialog -->
    <div id="{{node['path']}}_createChildDialog" class="node_edit" *ngIf="node['creatingChild']" [class.dialog]="node['schemaChildren']"
        treeScrollTo [node]="node">
        <ng-container *ngIf="node['schemaChildren'].length; else nothingToCreate">
            <tree-indent [node]="node" [indentation]="indentation" [type]="'edit'"
                (onCloseCreatingDialog)="closeCreatingDialog($event)"></tree-indent>
            <select #nodeSelect (change)="creatingDialogSelect(node, $event.target.value, $event.currentTarget)">
                <option disabled selected value="-1" style="display:none">&nbsp;</option>
                <ng-container *ngFor="let schema of node['schemaChildren']; let i='index'">
                    <option value="{{i}}">{{schemaInfoName(node, schema)}}</option>
                </ng-container>
            </select>
            <!--  <pre>{{node['schemaChildren'] | json}}</pre> -->
        </ng-container>
        <ng-template #nothingToCreate>
            <div class="msg-failure msg-rounded">
                <span class="msg-close" (click)="closeCreatingDialog(node);">x</span>There is no element to create at {{node['path']}}.
            </div>
        </ng-template>
    </div>
</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"
			(onDeleteSubtree)="deleteSubtree($event)" (onOpenCreatingDialog)="openCreatingDialog($event.element, $event.node, $event.parent)">
		</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['info']['key'] && 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['path'] != 'locallyNew' && ((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'"
                (onCloseCreatingDialog)="closeCreatingDialog($event)"
                (onDeleteSubtree)="deleteSubtree($event)"></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" [root]="root" [indentation]="inheritIndentation(node)"></tree-view>
        </ng-container>
        <ng-container *ngFor="let child of newChildrenToShow(node)">
            <tree-view [node]="child" [root]="root" [indentation]="inheritIndentation(node)"></tree-view>
        </ng-container>
    </div>

    <!-- create new child dialog -->
	<div id="{{node['path']}}_createChildDialog" class="node_edit" *ngIf="node['creatingChild']" [class.dialog]="node['schemaChildren']"
        treeScrollTo [node]="node">
		<ng-container *ngIf="node['schemaChildren'].length; else nothingToCreate">
            <tree-indent [node]="node" [indentation]="inheritIndentation(node)" [type]="'edit'"
                (onCloseCreatingDialog)="closeCreatingDialog($event)"></tree-indent>
			<select #nodeSelect (change)="creatingDialogSelect(node, $event.target.value, $event.currentTarget)">
				<option disabled selected value="-1" style="display:none">&nbsp;</option>
				<ng-container *ngFor="let schema of node['schemaChildren']; let i='index'">
					<option value="{{i}}">{{schemaInfoName(node, schema)}}</option>
				</ng-container>
			</select>
            <!--  <pre>{{node['schemaChildren'] | json}}</pre> -->
		</ng-container>
		<ng-template #nothingToCreate>
			<div class="msg-failure msg-rounded">
				<span class="msg-close" (click)="closeCreatingDialog(node);">x</span>There is no element to create at {{node['path']}}.
			</div>
		</ng-template>
	</div>

</div>