NodeJS/Angular Plugin <documentations>

NodeJS/Angular Plugin <documentations>

Published on: 11/18/2018

Documentations - The Angular article library

This is a demonstration article constructed and rendered by this library. There are many different section types you can use for your articles, e.g. title, text, code, math, images, tables, citation, nested tabs and accordions. To reorder the sections use the drag-handle next to the type input field and drag it to the target position. Press save to update the output.
import { Component } from '@angular/core'; @Component() export class; MyComponent; { }
Listing: This is how to create a basic component in Angular
You can also use tabs in your article. Just select tabs as type and create your own tabs. Each tab is a standalone documentation, similar to expansion panels. You can build deep nested documentations as you can see in the Deep nesting demo tab of the following tab panel. You can use as many nested expansion panels or tabs as fitting in your screen.

Render a documentation

At first install all necessary dependencies by the following npm command.
npm i documentations # or yarn add documentations
Import all necessary dependencies in your angular module. If you just need rendering import only DocuModule.
import { DocuModule, DocuEditorModule } from '../../projects/documentations/src/public_api'; @NgModule({ imports: [ DocuModule, DocuEditorModule ] }) export class AppModule { }
Listing: Import modules
In order to render the generated article just use the following tag and pass in the documentation as @Input.
<docu-article [documentation]="documentation"></docu-article>

Creating a documentation editor

Make sure that you have imported the DocuEditorModule first. This module provides a component docu-editor containing the complete logic for creating the article. Use the documentation input to patch the form, works with all the deep nesting.
<docu-editor [documentation]="documentation" [imageUrls]="imageUrls" (save)="mySaveFunction($event)"></docu-editor>
Use the save event to catch and store the saved documentation. The documentation data is contained in the $event variable. If you want to include images in your article, hand in the imageUrls via the suggested @Input().
To use latex in your documents just select math as the type and insert your latex expressions. Inline math for text sections is currently not supported.

Math-Example: Runge-Kutta

There is an initial conditions problem with the following definition:
y(t)=f(t,y(t)),y(t0)=y0,y:RRdy'(t) = f(t, y(t)), \qquad y(t_0) = y_0, \qquad y: \R \rightarrow \R^d
where y(t) is the exact solution. Runge-Kutta is a numerical integration method which determines the function value at different t 's and sums each value with a weight to get the next value.
yn+1=yn+hj=1sbjkjy_{n+1} = y_n + h\sum_{j=1}^s b_jk_j
The above equation is generated using the following latex expression
y_{n+1} = y_n + h\sum_{j=1}^s b_jk_j
Listing: Latex expressions in documentations
Displaying data is a common task for writing scientific, educational or other types of posts/blogs/aricles or whatever. Therefore a table component can't be missed. There is example data in the following table.
CPU [s]
GPU [s]
FPGA [s]
Test suite 1
5.6
6.3
21.2
Test suite 2
5.6
4.1
35.7
Table: Test test suites on various processing units. Devices are Intel Core i7 6900K, MSI GTX 1080 Gaming X and isDigilent, Inc. 410-282
Setup an NgRX store

Get in contact

Hi, I am Felix Lemke. If you like that library visit follow me on github twitter instagram