member_webapp/@overflow/discovery/component/search-result.component.html

<div>
    <button pButton type="button" label="TestHost" (click)="tempHost()"></button>
    <button pButton type="button" label="TestService" (click)="tempService()"></button>
    <button pButton type="button" label="tempPort" (click)="tempPort()"></button>

    <p-tree [value]="zoneNode" layout="vertical">

        <!-- ZONE node template -->
        <ng-template let-node pTemplate="ZONE">
            <div>
                {{node.label}}
            </div>
        </ng-template>


        <!-- HOST node template -->
        <ng-template let-node pTemplate="HOST">
            <div @discoveryResultAnim>
                <div *ngIf="checkUnhighligtHost(node.label) else normHost">
                    <div>{{node.label}}</div>
                </div>
                <ng-template #normHost>
                    <p-toggleButton onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check" offIcon="fa-square" [style]="{'width':'200px'}"
                        (onChange)="onTargetSelect($event, node.data)"></p-toggleButton>
                </ng-template>
            </div>
        </ng-template>

        <!-- SERVICE node template -->
        <ng-template let-node pTemplate="SERVICE">
            <div @discoveryResultAnim>
                <div *ngIf="checkHighligtService(node.data.name) else unhighlight">
                    <p-toggleButton onLabel="{{node.label}} {{node.data.portType}}" offLabel="{{node.label}} {{node.data.portType}} {{node.data.portNumber}}"
                        onIcon="fa-check" offIcon="fa-square" [style]="{'width':'300px'}" (onChange)="onTargetSelect($event, node.data)"></p-toggleButton>
                </div>

                <ng-template #unhighlight>
                    <div>{{node.label}} {{node.data.portType}}</div>
                </ng-template>

            </div>
        </ng-template>

    </p-tree>
</div>