Есть несколько свободных и надежных библиотек, которые вы можете использовать для создания древовидных диаграмм в Angular 11 с использованием TypeScript, поддерживающих интерактивность и обработку событий нажатия.
Одним из таких вариантов является библиотека ngx-org-chart. Она предоставляет компоненты и сервисы для отображения древовидных диаграмм в Angular с возможностью обработки событий нажатия. Библиотека поддерживает TypeScript и легко интегрируется в Angular проект.
Для установки ngx-org-chart вы можете выполнить следующую команду:
```
npm install ngx-org-chart --save
```
После установки вы можете использовать компоненты и сервисы из библиотеки в своем проекте Angular.
Пример использования ngx-org-chart:
1. Установите библиотеку ngx-org-chart:
```bash
npm install ngx-org-chart --save
```
2. Импортируйте необходимые модули в ваш модуль Angular:
```typescript
import { NgxOrgChartModule } from 'ngx-org-chart';
@NgModule({
imports: [
NgxOrgChartModule
],
})
export class AppModule { }
```
3. Используйте компонент `ngx-org-chart` в вашем шаблоне:
```html
<ngx-org-chart
[data]="treeData"
(nodeClick)="onNodeClick($event)"
></ngx-org-chart>
```
4. В вашем компоненте определите дерево данных и обработчик события нажатия:
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-tree',
templateUrl: './tree.component.html',
styleUrls: ['./tree.component.css']
})
export class TreeComponent {
treeData = {
label: 'Root',
children: [
{
label: 'Node 1',
children: [
{
label: 'Node 1.1'
},
{
label: 'Node 1.2'
}
]
},
{
label: 'Node 2'
}
]
};
onNodeClick(event: any) {
console.log(event);
}
}
```
Таким образом, вы можете использовать библиотеку ngx-org-chart для создания древовидных диаграмм в Angular с интерактивностью и обработкой событий нажатия.
Это только один из вариантов, и в зависимости от ваших требований, вы можете также рассмотреть другие библиотеки, такие как ngx-d3-tree или ngx-graph.