open-index/open-npm huggingface dataset:
npm package: @notadd/ng-material-pro
Description: Angular material2 Extension Components ..
Latest version: 0.0.16

# NgMaterialPro

Angular material2 Extension Components ..


It will be like : https://vuetifyjs.com/zh-Hans/components/alerts

**[中文说明](README_zh.md)**

### Step 1: Install and configure Angular Material
  [Getting Started Guide](https://material.angular.io/guide/getting-started) with Angular Material
### Step 2: Install Notadd NgMaterialPro
```shell
  ng add @notadd/ng-material-pro
```

### Step 3: Import the component modules
```TypeScript
  import { NmAlertModule, NmCarouselModule, NmCascadeDropdownlistModule } from '@notadd/ng-material-pro';
  
  @NgModule({
    ...
    imports: [ NmAlertModule, NmCarouselModule, NmCascadeDropdownlistModule ],
    ...
  })
  export class AppModule { }
```

## Contribution Description

We welcome material2 users to participate in the development of this plugin, and as a contributor, please follow the following guidelines: -Code submission specification, refer to [Git Commit Message Conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#)
-Always from develop checkout a new branch, the naming specification for feature/xxx,xxx must be readable, such as: Icons => feature/icons
-Pull the latest code for the remote develop branch in the local develop branch before the new branch of checkout

-Refer to the project's current naming rules for file naming rules.

function Development Check Roadmap first to make sure that the features you want to contribute are not being implemented.

Then submit a contribution request in**issue**indicating the features you want to contribute.

Find Bugs? If you find a bug in the source code, please submit a bug question in the**issue**of this warehouse first.

After you have submitted the bug question, we are happy to accept that you submit a**pr**to help us fix the bug.

## QQ Communication Group

321735506, please specify the purpose of the group!

### Roadmap

- [ ] Icons+✔

**Layout**

- [ ] Preset layout**ANIMATION**

**ui Component **

- [x] Prompt box (components/alerts)
- [x] Rotation (components/carousels)
- [ ] Footer (Components/footer)

Button:

- [ ] Item group (item-groups)
- [x] multi-level linkage ✔
- [ ] multi-Window (components/windows)
- [ ] hover (components/hover)
- [ ] upload "file upload, image upload, avatar upload"
- [ ] Parallax (Components/parallax)
- [ ] Rating (components/ratings)
- [ ] Timeline (components/timelines)
- [ ] Drag and drop tree view "lag"
npm package: @notadd/ng-material2
Description: Angular material2 Extension Components ..
Latest version: 0.0.8
Deprecated: WARNING: This project has been renamed to @notadd/ng-material-pro. Install using @notadd/ng-material-pro instead.

# NgMaterial2

Angular material2 Extension Components ..


It will be like : https://vuetifyjs.com/zh-Hans/components/alerts

**[中文说明](README_zh.md)**

### Step 1: Install and configure Angular Material
  [Getting Started Guide](https://material.angular.io/guide/getting-started) with Angular Material
### Step 2: Install Notadd NgMaterial2
```shell
  ng add @notadd/ng-material2
```

### Step 3: Import the component modules
```TypeScript
  import { NmAlertModule, NmCarouselModule, NmCascadeDropdownlistModule } from '@notadd/ng-material2';
  
  @NgModule({
    ...
    imports: [ NmAlertModule, NmCarouselModule, NmCascadeDropdownlistModule ],
    ...
  })
  export class AppModule { }
```

## Contribution Description

We welcome material2 users to participate in the development of this plugin, and as a contributor, please follow the following guidelines: -Code submission specification, refer to [Git Commit Message Conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#)
-Always from develop checkout a new branch, the naming specification for feature/xxx,xxx must be readable, such as: Icons => feature/icons
-Pull the latest code for the remote develop branch in the local develop branch before the new branch of checkout

-Refer to the project's current naming rules for file naming rules.

## function Development Check Roadmap first to make sure that the features you want to contribute are not being implemented.

Then submit a contribution request in**issue**indicating the features you want to contribute.

## Find Bugs? If you find a bug in the source code, please submit a bug question in the**issue**of this warehouse first.

After you have submitted the bug question, we are happy to accept that you submit a**pr**to help us fix the bug.

## QQ Communication Group

321735506, please specify the purpose of the group!

### Roadmap

- [ ] Icons+✔

**Layout**

- [ ] Preset layout**ANIMATION**

**ui Component **

- [x] Prompt box (components/alerts)
- [x] Rotation (components/carousels)
- [ ] Footer (Components/footer)

Button:

- [ ] Item group (item-groups)
- [x] multi-level linkage ✔
- [ ] multi-Window (components/windows)
- [ ] hover (components/hover)
- [ ] upload "file upload, image upload, avatar upload"
- [ ] Parallax (Components/parallax)
- [ ] Rating (components/ratings)
- [ ] Timeline (components/timelines)
- [ ] Drag and drop tree view "lag"
npm package: @notadd/ngx-neditor
Description: 基于[@notadd/neditor](https://github.com/notadd/neditor)，更现代化的富文本编辑器angular组件
Latest version: 1.0.2

# ngx-neditor

基于[@notadd/neditor](https://github.com/notadd/neditor)，更现代化的富文本编辑器angular组件

## How to use
### step-1

#### 安装`@notadd/ngx-neditor`
+ `npm install @notadd/ngx-neditor` 
 
#### 安装依赖
+ `mkdir -p ./src/assets/node_modules`
+ `npm install --prefix ./src/assets @notadd/neditor`
> ⚠ neditor需在assets/node_modules下安装

#### step-2

+ 添加NgxNeditorModule到你的AppModule

```typescript
  import { NgxNeditorModule } from '@notadd/ngx-neditor';

  @NgModule({
    imports: [
        ...
        NgxNeditorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
```

#### step-3

+ 在你的component中添加`ngx-neditor`组件

```html
<ngx-neditor [(ngModel)]="content" #neditor [config]="config"></ngx-neditor>
```

#### Neditor相关配置见[@notadd/neditor](https://github.com/notadd/neditor)

## 属性
| 名称    | 类型           | 默认值  | 描述 |
| ------- | ------------- | ----- | ----- |
| config | `Object` | - | 前端配置项说明，[见官网](http://fex.baidu.com/ueditor/#start-config) |
| loadingTip | `string` | `加载中...` | 初始化提示文本 |
| disabled | `boolean` | `false` | 是否禁用 |
| delay | `number` | `50` | 延迟初始化Neditor，单位：毫秒 |
| neOnReady | `EventEmitter<NgxNeditorComponent>` | - | 编辑器准备就绪后会触发该事件，并会传递 `NgxNeditorComponent` 当前实例对象，可用于后续操作。 |
| neOnDestroy | `EventEmitter` | - | **编辑器组件销毁**后会触发该事件 |
| ngModelChange | `EventEmitter<string>` | - | 编辑器内容发生改变时会触发该事件 |
npm package: @notadd/ngx-tree-dnd
Description: 基于@swimlane/ngx-dnd，可拖拽,可配置actions的Angular树组件
Latest version: 1.0.4

# ngx-tree-dnd

基于[@swimlane/ngx-dnd](https://github.com/swimlane/ngx-dnd)，可拖拽,可配置actions的Angular树组件  
保留原有的api和feature，修改了默认样式，添加了折叠、action配置

## How to use
### step-1

#### 安装`@notadd/ngx-tree-dnd`
+ `npm install @notadd/ngx-tree-dnd` 
 
#### 安装依赖
+ `npm install @swimlane/dragula material-design-icons`

#### step-2
+ 添加NgxTreeDnDModule到你的AppModule
+ 在angular.json或者styles中引入material-design-icons
> 如果你的项目是Angular6，需要在polyfills.ts中添加如下代码：
`(window as any).global = window;`

#### step-3
+ 在你的component中添加`ngx-tree-dnd-container`组件
```html
<ngx-tree-dnd-container
    [labelKey]="'title'"
    [model]="nestedLists"
    [actions]="actions">
</ngx-tree-dnd-container> 
```

```js
nestedLists = [
  {
    title: 'Item 1',
    children: []
  },
  {
    title: 'Item 2',
    children: [
      {
        title: 'Item 2a',
        children: []
      },
      {
        title: 'Item 2b',
        children: []
      },
      {
        title: 'Item 2c',
        children: []
      }
    ]
  },
  {
    title: 'Item 3',
    children: [
      {
        title: 'Item 3a',
        children: []
      },
      {
        title: 'Item 3b',
        children: []
      },
      {
        title: 'Item 3c',
        children: []
      }
    ]
  }
];
```
```js
actions = [
    {
      // action按钮material icon
      icon: 'remove_red_eye',
      /* 点击action按钮的回调函数 */
      callback: (model) => {
        /* model为当前actions所在item的model */
        /* do something */
      }
    },
    {
      icon: 'edit',
      callback: (model) => {}
    },
    {
      icon: 'delete',
      callback: (model) => {}
    }
  ];
```

## 属性
+ `labelKey: string`，item title的键值，默认为 'label'
+ `model: array`，tree数据源
+ `actions: array`，item操作项

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @notadd/ngx-xlsx
Description: 基于[SheetJS/js-xlsx](https://github.com/SheetJS/js-xlsx)，Angular导入、导出Excel，支持单个或者多个工作表导出、支持自定义表头、支持自定义工作表名称。
Latest version: 1.1.7

# ngx-xlsx

基于[SheetJS/js-xlsx](https://github.com/SheetJS/js-xlsx)，Angular导入、导出Excel，支持单个或者多个工作表导出、支持自定义表头、支持自定义工作表名称。

## How to use
### step-1

#### 安装`@notadd/ngx-xlsx`
+ `npm install @notadd/ngx-xlsx -S` 
 
#### 安装依赖
+ `npm install xlsx -S`
+ `npm install file-saver -S`

#### step-2

+ 添加NgxXLSXModule到你的AppModule

```typescript
  import { NgxXLSXModule } from '@notadd/ngx-xlsx';

  @NgModule({
    imports: [
        ...
        NgxXLSXModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
```

#### step-3

+ 在你的component中引入 `NgxXLSXService`
```typescript
  import { NgxXLSXService } from '@notadd/ngx-xlsx';
```

#### step-4

+ 注入service并在需要的地方调用导出方法 `exportAsExcelFile`
+ 注入service并在需要的地方调用导入方法 `importForExcelFile`


## `exportAsExcelFile` 方法

## 参数

|     参数名    |   类型   | 是否必填 | 默认值 |                                                                   说明                                                                  |
|:-------------|:--------|:--------|:------|:---------------------------------------------------------------------------------------------------------------------------------------|
| json          | any[]    | 必填     |        | 需要导出的数据json    多个工作表导出时数据为二维数组：`[[工作表1],[工作表2],[工作表三]]`    单个工作表导出时数据为一维数组：`[工作表1]` |
| exportOptions | ExportOptions   | 非必填     |    {}    | 导出配置    |    

## Interface

```typescript
export interface ExportOptions {
  /* 文件名， 默认为时间戳 */
  fileName?: string;     

  /* 表头，默认为 json 数组对象的 Object.keys, 长度必须与 json 数组对象的 Object.keys 长度相等 */
  /* 多个工作表可以对应多个表头或单个表头，多个表头为二维数组，与多个工作表匹配 */
  headers?: Array<string | Array<string>>;   

  /* Excel 工作表名称，默认为 'sheet' +索引(从1开始) 多个工作表导出时长度必须与 json 数组长度相等 单个工作表导出时长度必须等于1 */   
  sheetNames?: Array<string>;

  /* 需要合并单元格的数组，['A1:B1'] 和 [['0,0', '0,1']] 等效，两种写法都支持 */
  merges?: Array<string | Array<string>>;
}
```

## `importForExcelFile` 方法

## 参数

|     参数名    |   类型   | 是否必填 | 默认值 |                                                                   说明                                                                  |
|:-------------|:--------|:--------|:------|:---------------------------------------------------------------------------------------------------------------------------------------|
| file          | File    | 必填     |        | 需要导入的 Excel 文件对象 |
| importOptions | ImportOptions   | 非必填     |    {}    | 导入配置    |    

## Interface

```typescript
export interface ImportOptions {
  /* 表头行数，默认为1，当 `headerKeys` 不为 `[]` 时导入的数据会按表头行数截取数组 */
  headerRows?: number;   

  /* Excel 表头对应的导入 `json` 的 `key`，默认为 Excel 表头 */
  /* 多个工作表可以对应多个`key`数组或单个`key`数组，多个`key`数组为二维数组 */
  headerKeys?: Array<string | Array<string>>;
}
```