This component displays a Markdown formatted file in a context window.
The Markdown files may be stored in the assets/ folder for the project or may be maintained on a server (cloud) https://
The component incorporates tools for section (heading) selection, Tagged selections and search text (single and multiple) in the content.
As a formControl you can get valueChanges and patchValue for defining selections in the component
Import the Module - DocumentationViewerModule
File: This is required indicating the Markdown file to load - this can be a local location in the project assets/ or a server (cloud) must be the full url location - https://domain.com/files/documents/my-markdown.md
This is a basic setup
` <app-documentation-viewer file="https://domain.com/files/documents/my-markdown.md"
`
Sample of using all inputs
` <app-documentation-viewer [formControl]="documentViewerControl" [file]="filePath" [displaySectionsSelector]="sectionsDisplay.checked" [displayTagsSelector]="tagsDisplay.checked" [displaySearch]="searchDisplay.checked" [multiPhraseSearch]="multiple.checked" (urlClick)="onSelected($event)"
`
| Input | Type | Description | | ----------- | ----------- | | displaySectionsSelector | boolean | Sections are Headings that are defined by # | displayTagsSelector | boolean | Tags are specified in the markdown after the Heading # as | displaySearch | boolean | Search content for specific word | multiPhraseSearch | boolean | Search content for specific words that is provided as a chips component
(urlClick)="onSelected($event)" - on user selection of a anchor-link in the markdown returns the following:
{ "name": "Karma", "url": "https://karma-runner.github.io" }
The event returns an object containing the Name of the link and the Url.
[formControl]="documentViewerControl" - Define the control, this.documentViewerControl = this.fb.control(null)
this.documentViewerControl.valueChanges.subscribe(data => { console.log(data) // This returns })