Блог Михаила Крамера. PHP и JS

Иногда необходимо отобразить рекурсивную структуру данных: меню, дерево каталогов, структуру организации. В ангуляре для этого можно эффективно использовать ng-template. Статья написана на основе аглоязычной статьи Playing With Recursive Ng-Template References In Angular 6.1.10

И так, у нас есть следующая структура данных внутри компонента:

this.data = {
	root: {
		label: "first",
		children: [
			{
				label: "second-a",
				children: [
					{
						label: "third-first",
						children: [
							{
								label: "ferth",
								children: [
									{
										label: "fiver",
										children: []
									}
								]
							}
						]
					}
				]
			},
			{
				label: "second-b",
				children: [
					{
						label: "third",
						children: []
					}
				]
			}
		]
	}
}

Для отображения данного дерева в шаблоне используется такой код:

<ng-template #nodeTemplateRef let-node>
	<div class="node">
 
		<a (click)="selectNode( node )" class="node__label">
			{{ node.label }}
		</a>
 
		<div *ngIf="node.children.length" class="node__children">
 
			<!-- Invoke the recursive template. -->
			<ng-template
				ngFor
				[ngForOf]="node.children"
				[ngForTemplate]="nodeTemplateRef">
				<!--
					NOTE: Благодаря свойству "$implicit" в контексте ngForOf дочерние узлы будут попадать в переменную node шаблона.
				-->
			</ng-template>
 
		</div>
 
	</div>
 
</ng-template>

<!--
	Инициируем рекурсивный рендеринг. Необходимо, чтоб контекст при инициации был похож на контекст всей структуры, 
	поскольку внутри #nodeTemplateRef используется ngFor
	
-->
<ng-template
	[ngTemplateOutlet]="nodeTemplateRef"
	[ngTemplateOutletContext]="{ $implicit: data.root }">
</ng-template>