ng-docx
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.1 • Public • Published

    Ng-Docx Logo

    Build Status npm version npm download license

    Getting Started

    Welcome to NG-DOCX!

    DEMO

    Stackblitz

    Demo GIF

    What is Ng-docx?

    Ng-docx is a library that automatically generates a documentation page to easily and beautifully view your markdowns

    PeerDependencies

    Before install the library, install the necessary dependencies to function properly

    Angular compatibility

    Angular Ng-docx
    12 3.x.x
    11 2.x.x
    10 1.x.x
    9 0.4.x
    8 0.3.x

    Installation

    npm install ng-docx
    

    Add styles

    Import on your global styles:

    The styles from the library:

    styles.scss

    @import '~ng-docx/assets/styles/ng-docx.scss';

    Add scripts

    angular.json

    "scripts": [
        "node_modules/marked/lib/marked.js",
        "node_modules/prismjs/prism.js",
        "node_modules/prismjs/components/prism-typescript.min.js",
        "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js"
    ]

    Import the library

    Steps

    To make your documentation page you must wrap the NgDocxModule, for this follow these steps:

    1. Create a Module on your app, i.e, DocsModule (docs.module.ts)

    2. Import the NgDocxModule and the NgDocxComponent

      docs.module.ts

      import { NgDocxModule, NgDocxComponent } from 'ngx-docx';
    3. Add the names of the files you want to add to the documentation.

      docs.module.ts

      const files = ['getting started', 'theming'];
      
      @NgModule({
          imports: [
              NgDocxModule.forRoot({
                  files
              })
          ]
      })
    4. Add the route to NgDocxComponent on your module.

      docs.module.ts

      const routes: Routes = [
          {
              path: '',
              children: [{ path: '', component: NgDocxComponent }]
          }
      ];
      @NgModule({
          imports: [
              NgDocxModule.forRoot({
                  files: fileNames
              }),
              RouterModule.forChild(routes)
          ]
      })

    Final code on your wrap module

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { NgDocxModule, NgDocxComponent } from 'ng-docx';
    
    const fileNames = ['getting started', 'theming'];
    
    const routes: Routes = [
        {
            path: '',
            children: [{ path: '', component: NgDocxComponent }]
        }
    ];
    
    @NgModule({
        imports: [
            NgDocxModule.forRoot({
                files: fileNames
            }),
            RouterModule.forChild(routes)
        ]
    })
    export class WrapperDocsModule {}

    What type of extensions are supported?

    • Markdown (.md)

    Where are my docs located?

    The files must be placed in the assets folder inside a subfolder called docs, for example:

    • assets
      • docs
        • getting started.md
        • theming.md

    Install

    npm i ng-docx

    DownloadsWeekly Downloads

    91

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    427 kB

    Total Files

    52

    Last publish

    Collaborators

    • carlos_tenorio