ng-simple-file-tree

Simple-file-tree

Simple file tree for displaying files in a tree structure made with angular

File tree can be configured with the following options:

export interface FileTreeOptions {
  highlightOpenFolders: boolean;
  folderBehaviourOnClick: 'select' | 'expand' | 'both';
  autoOpenCondition?: (item: CreateTreeItem) => boolean;
  autoSelectCondition?: (item: CreateTreeItem) => boolean;
  determineIconClass?: (item: CreateTreeItem) => string;
  expandAllFolders?: boolean;
  hierarchyLines?: {
    vertical?: boolean,
    horizontal?: boolean,
  },
  styles?: {
    all?: string,
    treeItem?: {
      default?: string,
      active?: string,
    },
    treeIcon?: string,
    chevron?: string,
    hierarchyLine?: {
      horizontal?: string,
      vertical?: {
        default?: string,
        active?: string,
      },
    },
  }
}

Example:

  options = {
    highlightOpenFolders: false,
    folderBehaviourOnClick: 'expand',
    hierarchyLines: {
      vertical: true
    },
    styles: {
      all: 'font-family: consolas',
    }
  }

File extensions are automatically inferred by getting the value at the end of the filename after .: so login.spec.js would have extension .js

You can also use the determineIconClass function to add icons with any package you want, so if you use bootstrap icons you could do:

function determineIcon(value: CreateTreeItem): string {
  return 'bi bi-1-circle-fill'
}

And if you want to add color you can define a css class with color:

.red {
  color: red;
}

and then pass that class as well

function determineIcon(value: CreateTreeItem): string {
  return 'bi bi-1-circle-fill red'
}