# @notiz/ngx-markdoc

> Markdoc component for your Angular application

Latest version **0.2.0** (published 2023-11-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @notiz/ngx-markdoc
pnpm add @notiz/ngx-markdoc
yarn add @notiz/ngx-markdoc
bun add @notiz/ngx-markdoc
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-11-15 |
| First published | 2022-07-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 56.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | notiz |
| Maintainers | garygrossgarten, marcjulian |
| Keywords | markdoc, angular, markdown |

## Links

- npm: https://www.npmjs.com/package/@notiz/ngx-markdoc
- Repository: https://github.com/notiz-dev/ngx-markdoc
- Homepage: https://github.com/notiz-dev/ngx-markdoc#readme
- Issues: https://github.com/notiz-dev/ngx-markdoc/issues
- npm.io page: https://npm.io/package/@notiz/ngx-markdoc

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.2.0 (latest) — 2023-11-15
- 0.1.0 — 2022-07-20

## README

# @notiz/ngx-markdoc

```bash
npm i @notiz/ngx-markdoc @markdoc/markdoc js-yaml

npm i -D @types/js-yaml
```

Set `allowSyntheticDefaultImports` to `true` in your `tsconfig.json`.

## Usage

Provide `HttpClient` in your `app.config.ts`

```ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideHttpClient()],
};
```

Import `Markdoc` into your component and use `<markdoc></markdoc>` in your template.

```ts
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Markdoc } from '@notiz/ngx-markdoc';

@Component({
  selector: 'app-docs',
  standalone: true,
  imports: [Markdoc],
  template: `
    <markdoc #markdoc src="assets/md/docs/getting-started.md"></markdoc>
  `,
})
export class DocsComponent {}
```

### 1. Content

```html
<markdoc> # Markdoc for Angular </markdoc>
```

### 2. Content input

```html
<markdoc content="# Markdoc for Angular"> </markdoc>
```

### 3. Markdown file

```html
<markdoc src="assets/md/example.md"></markdoc>
```

---
_Source: https://npm.io/package/@notiz/ngx-markdoc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._