How to show dotted lines for connecting tree nodes in TreeView

How to show dotted lines for connecting tree nodes in tree view , please can you help me out on this topic also i attached my below expected output

.ts

> buildForm(item: TreeItem) {
> 
>     const group: { [id: string]: AbstractControl } = {};
> 
>     if (item.hasOwnProperty('type')) {
> 
>       group.type = new FormControl(item.type);
> 
>     }
> 
>     if (item.element) {
> 
>       group.element = this.formBuilder.array(item.element.map(el => this.buildForm(el)))
> 
>     }
> 
>     return this.formBuilder.group(group);
> 
>   }
> 
>   ngOnInit() {
> 
>     this.testForm = this.buildForm(data);
> 
>   }
> 
>   onSubmit() {
> 
>     console.log(this.testForm.value);
> 
>   }

*.html

<form class="tree" [formGroup]="testForm" (ngSubmit)="onSubmit()">

  <ng-template #recursiveList let-controls let-prefix="prefix">

    <ng-container *ngFor="let item of controls; let i = index">

      <div class="tree-item" [formGroup]="testForm.get(prefix + i)">

        <input type="text" formControlName="type">

      </div>

      <div class="sub-tree" *ngIf="item.get('element')?.controls?.length">

        <ng-container

          *ngTemplateOutlet="recursiveList; context:{ $implicit: item.get('element').controls, prefix: prefix + i + '.element.'  }"></ng-container>

      </div>

    </ng-container>

  </ng-template>

  <ng-container

    *ngTemplateOutlet="recursiveList; context:{ $implicit: testForm.get('element').controls, prefix: 'element.' }"></ng-container>

</form>

<pre>{{testForm.value | json}}</pre>

1 post - 1 participant

Read full topic