Angular PrimeNG树的节

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架用于制作响应式网站，非常容易。这篇文章将向我们展示如何在Angular PrimeNG中使用树形部分。

Angular PrimeNG树段提供各种模板来显示数据的额外信息，如标题、页脚和空信息。

语法:

<ng-template pTemplate="header">
       Header Content
</ng-template>
<ng-template pTemplate="empty">
       No records found
</ng-template>
<ng-template pTemplate="footer">
       Footer Content
</ng-template>

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

步骤3：在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：它将看起来像如下。

例子1：下面是一个简单的例子，演示了Angular PrimeNG树节的使用。在这个例子中，我们是页眉和页脚部分。

• app.component.html

<h2 style="color: green;">
    GeeksforGeeks
</h2>
  
<h4>Angular PrimeNG Tree Sections</h4>
  
<p-tree [value]="files1" scrollHeight="300px">
    <ng-template pTemplate="header"> 
        My Folder Directory 
    </ng-template>
    <ng-template pTemplate="footer"> 
        The End 
    </ng-template>
</p-tree>

• app.component.ts

import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    files1: TreeNode[] = [];
  
    constructor() { }
  
    ngOnInit() {
        this.files1 = [
            { label: 'Z', icon: 'pi pi-folder' },
            { label: 'A', icon: 'pi pi-folder' },
            { label: 'D', icon: 'pi pi-folder' },
            { label: 'C', icon: 'pi pi-folder' },
            { label: 'W', icon: 'pi pi-folder' },
            { label: 'E', icon: 'pi pi-folder' },
            { label: 'R', icon: 'pi pi-folder' },
            { label: 'G', icon: 'pi pi-folder' },
            { label: 'K', icon: 'pi pi-folder' },
  
            {
                label: 'A',
                icon: 'pi pi-folder',
  
                children: [
                    {
                        label: 'B',
                        icon: 'pi pi-folder',
  
                        children: [
                            {
                                label: 'C',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'D',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                    {
                        label: 'E',
                        icon: 'pi pi-folder',
  
                        children: [
                            {
                                label: 'F',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'G',
                icon: 'pi pi-folder',
  
                children: [
                    {
                        label: 'H',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'I',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'J',
                        icon: 'pi pi-folder',
                    },
                ],
            },
        ];
    }
}

• app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { VirtualScrollerModule }
    from 'primeng/virtualscroller';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeModule,
        ButtonModule,
        InputTextModule,
        HttpClientModule,
        FormsModule,
        VirtualScrollerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [],
})
export class AppModule { }

输出:

例子2：下面是另一个例子，演示Angular PrimeNG树节的使用。在这个例子中，我们使用的是空模板。

• app.component.html

<h2 style="color: green;">
    GeeksforGeeks
</h2>
  
<h4>Angular PrimeNG Tree Sections</h4>
  
<p-tree [value]="files1" scrollHeight="300px">
    <ng-template pTemplate="empty"> 
        No records found 
    </ng-template>
</p-tree>

• app.component.ts

import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    files1: TreeNode[] = [];
  
    constructor() { }
  
    ngOnInit() {
        this.files1 = [];
    }
}

• app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { VirtualScrollerModule }
    from 'primeng/virtualscroller';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeModule,
        ButtonModule,
        InputTextModule,
        HttpClientModule,
        FormsModule,
        VirtualScrollerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [],
})
export class AppModule { }

输出: