一. 安装

npm i ng-material-treetable --save

npm i @angular/material @angular/cdk @angular/animations --save

二、配置

  1. 在app.module.ts中导入模块

import { TreetableModule } from 'ng-material-treetable';

@NgModule({

...

imports: [

...

TreetableModule

],

...

})

export class AppModule { }

  1. 在template中使用,本文使用app.componet.html

<treetable [tree]="arrayOfPerson(yourTreeDataStructure)"></treetable>

  1. 导入material的样式,在style.css添加

    @import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');

  2. 在app下新建一个yourDataStructure.ts定义自己的数据结构,本文新建Person.ts

    import { Node } from 'ng-material-treetable';

    export interface Person {

    name: string;

    age: number;

    married: boolean;

    }

  3. 在对应componet中定义自己的树形数据结构

    import { Person} from './Person';

    import { Node } from 'ng-material-treetable';

    export class AppComponent {

    arrayOfPerson : Node<Person>[]= [

    {

    value: {

    name: 'Marry',

    age: 40,

    married: true

    },

    children: [

    {

    value: {

    name: 'Morry',

    age: 2,

    married: false

    },

    children: []

    },

    {

    value: {

    name: 'Bob',

    age: 22,

    married: true

    },

    children: [

    {

    value: {

    name: 'By',

    age: 1,

    married: false

    },

    children: []

    }

    ]

    }

    ]

    },

    {

    value: {

    name: 'Gray',

    age: 30,

    married: true

    },

    children: [

    {

    value: {

    name: 'Gorry',

    age: 4,

    married: false

    },

    children: []

    },

    {

    value: {

    name: 'Gob',

    age: 15,

    married: false

    },

    children: []

    }

    ]

    }

    ]

    }

三、查看效果

Ng serve查看效果

参考 <https://www.npmjs.com/package/ng-material-treetable>

Angular Material TreeTable Component 使用教程的更多相关文章

  1. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  2. Angular Material 教程之布局篇

    Angular Material 教程之布局篇 (一) : 布局简介https://segmentfault.com/a/1190000007215707 Angular Material 教程之布局 ...

  3. Material使用11 核心模块和共享模块、 如何使用@angular/material

    1 创建项目 1.1 版本说明 1.2 创建模块 1.2.1 核心模块 该模块只加载一次,主要存放一些核心的组件及服务 ng g m core 1.2.1.1 创建一些核心组件 页眉组件:header ...

  4. Angular Material design设计

    官网: https://material.io/design/ https://meterial.io/components 优秀的Meterial design站点: http://material ...

  5. [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...

  6. Angular Material Starter App

      介绍 Material Design反映了Google基于Android 5.0 Lollipop操作系统的原生应用UI开发理念,而AngularJS还发起了一个Angular Material ...

  7. Angular Material & Hello World

    前言 Angular Material(下称Material)的组件样式至少是可以满足一般的个人开发需求(我真是毫无设计天赋),也是Angular官方推荐的组件.我们通过用这个UI库来快速实现自己的i ...

  8. angular material dialog应用

    1. 打开弹窗的点击事件 project.component.html <button mat-icon-button class="action-button" (clic ...

  9. Ng-Matero:基于 Angular Material 搭建的中后台管理框架

    前言 目前市面上关于 Angular Material 的后台框架比较少,大多都是收费主题,而且都不太好用. 很多人都说 Material 是一个面向 C 端的框架,其实在使用其它框架做管理系统的时候 ...

  10. 安装 Angular Material UI

    文档 调色板 安装 ng add @angular/material ? Choose a prebuilt theme name, or "custom" for a custo ...

随机推荐

  1. 备份Cisco交换机设备配置

    需求: 备份网络核心设备配置 工具: 1.3CDaemon软件,用于配置TFTP服务器 链接:http://www.china-ccie.com/download/3CDaemon/3CDaemon. ...

  2. BottomNavigationBar 自定义 底部导航条、以及实现页面切换

    一.Flutter BottomNavigationBar 组件 BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Sc ...

  3. C++ 11 std::mem_fn

    mem_fn 想到member function 成员函数 这还真就是用来调用成员函数的 普通的函数我们通过函数指针可以调用,但对于成员函数的调用稍微复杂一点,需要对象,也即this指针 因为成员函数 ...

  4. spring缓存创建

    /** * * <b>创建缓存</b> * <p> * 创建缓存,若已存在直接返回. * <p> * @param cacheName * @retur ...

  5. kubernetes强制删除namespace

    1.执行命令删除namespace后一直显示Terminating,无法删除namespace [root@k8s-master1 ~]# kubectl get ns NAME STATUS AGE ...

  6. 睿爸信奥-【临阵磨枪】练习赛(第一场)- T3

    目录 题面 题目背景 输入格式 输出格式 思路 code 题面 题目背景 徐老师很胖,长宽高比例为1:1:1,他每次走路都要滚来滚去~~现在假设在一个平面上有 n 个没有公共点公共点的圆.徐老师要从点 ...

  7. JAVA远程调用 webService

    package com.example.demo; import org.apache.cxf.endpoint.Client; import org.apache.cxf.jaxws.endpoin ...

  8. 当FTP不能满足大文件、海量文件传输时,有没有好的替代方案?

    很多企业存在大文件.海量文件的传输需求,如涉及到图像数据采集和回传.海量用户数据收集和同步等业务,一般情况,企业还是会采用传统的FTP传输,或者以此为基础,使用脚本或结合其他办公工具来解决传输需求. ...

  9. vue编辑修改,点击取消操作时,table内的内容不变

    1.父组件内  2.子组件内(使用JSON.parse(JSON.stringify(xxx值)))  进行深拷贝

  10. iOS开发之时间格式化

    //返回当前时间,以GMT为准 NSDate * date = [NSDate date]; NSLog(@"%@", date); //显示当前时间距离1970-01-01 00 ...