ng-write

Angular helpers for easily writing interactive articles

Usage no npm install needed!

<script type="module">
  import ngWrite from 'https://cdn.skypack.dev/ng-write';
</script>

README

ngWrite

Build Status npm dependencies downloads documentations downloads ng-write website

Article editor and article visualization for Angular. Just property-bind the returned object of the article editor to the article visualization. This library is ready for usage with the Ivy rendering engine at version 9.0.2 and following. See this library in action here.

Note: This library has been renamed from documentations to ng-write.

Animation (View on Github)

Installation

Add the package to your angular project using

npm install ng-write

The Editor

Make sure to have the DocuEditorModule imported.

@NgModule({
  imports: [ DocuEditorModule ]
})
export class ApplicationModule {}

The module provides a complete form with live rendering. It should integrate with your @angular/material configuration. In the template simply use the editor tag to create a complete form for the article.

<docu-editor (save)="doc = $event"></docu-editor>

In the component you can define a function to handle the save event. For example like:

@Component({...})
export class AppComponent {
  doc: Documentation;
}

You addition to that you can also define a documentation input data binding to the docu-editor tag to patch the documentation form.

  • @Output() save($event): When the user saves the form, the save event will emit and contain the complete nested form.
  • @Input() documentation: Documentation: The user can patch the form with a previously created documentation.

The Article

Make sure to import the DocuModule.

@NgModule({
  imports: [ DocuModule ]
})
export class ApplicationModule {}

Then you can use the following tag to display the documentation

<docu-article [documentation]="doc"></docu-article>
  • @Input() documentation: Documentation interface.

Contributing

Contributions are welcome. Please stick to the Angular commit message guidelines as described in this document and describe your problems as detailed as possible.

Get in touch

twitter github

Hi, I am Felix,
Senior Software Engineer, Angular, RxJS and NgRX contributor. For direct contact please add me on twitter, github or visit my personal website.

avatar