Create tree view with horizontal and vertical lines showing the connectivity using css

Question

I\'m having the requirement where we need to show the nested elements to have horizontal and vertical line for folders and subfolder. i searched but unable to find anything

Answer 1

The first it's know how make it using .css. I find this beauty Minimalist Tree View In Pure CSS

Well, with this idea we can use Angular to generate a "recursive component". but first we must take account that we need use "attribute selector" to not generate the tag of the component. Don't worry, it's only use as selector some like

selector: '[recursive]'

So, instead of write some like

we can use some like

Well, the component is like

    {{item.label}}
    

    


@Component({
  selector: '[recursive]', //<--the the "selector"
  templateUrl:'./hello.component.html'
})    
export class HelloComponent  {
  @Input() level: number;
  @Input() label: string;
  @Input() children: any;
  @Input() parent: any;

  self=this;

}

Well, I add the properties "level" and "parent" that I don't use in the code but can be interesting if our component make "some-more" that show the tree.

And our app.component.html is some like

Be carefull. I need use ViewEncapsulation.None in the app.component to transport the .css

See that we give [children] the own data

where, e.g.

data = [{label: "Parent1", children: [
      { label: "Parent 1's only child"  }
  ]},
    {label:"Parent2"},
    {label:"Parent3", children: [
      { label: "1st Child of 3" ,children:[
         {label:"1st grandchild"},
         {label:"2nd grandchild"}
      ]},
      { label: "2nd Child of 3" },
      { label: "3rd Child of 3" }
      ]
   },
   {
    label: "Parent 4", children: [
      { label: "Parent 4's only child"  }
  ]}]

You can see in this stackblitz

Updated If we want add open/close capacity, it's easy adding a span and using [ngClass] for the three cases: doc, open and close, so our recursive.html becomes

    
    {{item.label}}
    

    

I used a .css like

.doc,.open,.close
{
  display:inline-block;
  width:1rem;
  height:1rem;
  background-size: 1rem 1rem;
}
.doc
{
  background-image:url('...');
}
.open
{
  background-image:url('...');
}
.close
{
  background-image:url('...');
}

The updated stackblitz

Updated 2 I don't like so much use ViewEncapsulation.None, so we can make a work-around and our recursive component becomes like

  
  


  
  




    {{item.label}}
    

            

That's. The first use a

...

, the others not add the

Again, the final stackblitz