Change display of drop down

[khemebuen]

trafficstars

Is it possible to change the display of the DropdownTreeviewComponent? For our project we want to only show a folder icon and when they click on the icon we show the tree. If the component used a template like the tree items do then we could change the the display to not only show text but show an icon or icon and text

[leovo2708]

Yes, you can see code to implement DropdownTreeviewComponent, it will reuse TreeviewComponent, so you will not have to write many codes.

[khemebuen]

The ngx-dropdown-treeview-select works as we would like for our project. But can we make the combo dropdown just show a folder icon not the folder selected? I extended the TreeviewComponent but the drop down does not seem to work. See attached component. Thanks

custom-dropdown-treeview.component.zip

[khemebuen]

Still trying to reuse the TreeviewComponent to only how a folder icon and when the folder icon is selected the tree view shows. I setup my html for my control like this but it does not work. It just shows the whole tree and button separate. Am I missing smething:

<button class="btn" [ngClass]="buttonClass" type="button" role="button" ngxDropdownToggle>      
    <span class="fa fa-folder"></span>
</button>
<div ngxDropdownMenu aria-labelledby="dropdownMenu" (click)="$event.stopPropagation()">
    <div class="dropdown-container">
        <ngx-treeview [config]="config" [headerTemplate]="headerTemplate" [items]="items" [itemTemplate]="itemTemplate" (selectedChange)="onSelectedChange($event)">
        </ngx-treeview>
    </div>
</div>

import { Component } from '@angular/core'; import { DropdownTreeviewComponent, TreeviewI18n, TreeviewConfig } from "ngx-treeview";

@Component({ selector: 'custom-dropdown-treeview', templateUrl: './custom-dropdown-treeview.component.html', styleUrls: ['./custom-dropdown-treeview.component.scss'] }) export class CustomDropdownTreeviewComponent extends DropdownTreeviewComponent {

constructor(
    public i18n: TreeviewI18n,
    private dConfig: TreeviewConfig
) {
    super(i18n,dConfig);
}

getText(): string {
    return this.i18n.getText(this.treeviewComponent.selection);
}

onSelectedChange(values: any[]) {
    this.selectedChange.emit(values);
}

}

[SteffiKeranJ]

How to initialize the init of all as false?

[joschne]

I also need to customize the display of the dropdown toggle. Apart from that, DropdownTreeviewComponent fits all my needs.

Current code

https://github.com/leovo2708/ngx-treeview/blob/73698cce8f202c0cebfaee3a69467623850a46d6/src/lib/dropdown-treeview.component.html#L1-L12

Proposed Approach

The change would be very easy, I guess, by adding the possibility to inject a dropdownToggleTemplate.

This template could be provided to DropdownTreeviewComponent through an @Input(), like it is done with the headerTemplate of TreeviewComponent.

I'd like to hear your opinion about this approach before implementing...

[SSDSynergyAsad]

how to reuse placeholder Value actually i create three time dropdown but every dorpdown placeholder value change so how to reuse...