Skip to content

Instantly share code, notes, and snippets.

@mikeplate
Last active July 26, 2018 16:08
Show Gist options
  • Save mikeplate/0e0c3385052511f65c328a4fdb310ffe to your computer and use it in GitHub Desktop.
Save mikeplate/0e0c3385052511f65c328a4fdb310ffe to your computer and use it in GitHub Desktop.
Angular recursive template for tree structure
<!--
interface Organization {
name: string;
url: string;
children: Organization[];
}
org: Organization[];
-->
<div class="invid-tree">
<ng-template #recursiveList let-list>
<div *ngFor="let item of list" class="invid-tree-item">
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" style="min-width: auto;">
<i class="glyphicon glyphicon-cog"></i> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="javascript:" (click)="editOrg(item)"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
<li><a href="javascript:" (click)="install(item)"><i class="glyphicon glyphicon-cloud-upload"></i> Install</a></li>
<li><a href="javascript:" (click)="addOrg(item)"><i class="glyphicon glyphicon-plus"></i> Add</a></li>
</ul>
</div>
<a href="{{item.url || 'javascript:'}}" target="_blank">{{item.name}}</a>
<div *ngIf="item.children">
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
</div>
</div>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: org }"></ng-container>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment