# @dintecom/ngx-help-ext

> - `npm install @dintecom/ngx-help-ext` - install `npm install @angular/cdk dompurify` - peer dependencies of ngx-help-ext

Latest version **22.0.1** (published 2026-07-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dintecom/ngx-help-ext
pnpm add @dintecom/ngx-help-ext
yarn add @dintecom/ngx-help-ext
bun add @dintecom/ngx-help-ext
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 22.0.1 |
| Published | 2026-07-29 |
| First published | 2021-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 107.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dintecom |
| Maintainers | gkofman, artem-dintecom |
| Keywords | Angular, HelpExt |

## Links

- npm: https://www.npmjs.com/package/@dintecom/ngx-help-ext
- npm.io page: https://npm.io/package/@dintecom/ngx-help-ext

## Dependencies (1)

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

## Recent versions

- 22.0.1 (latest) — 2026-07-29
- 22.0.0 — 2026-07-29
- 21.0.2 — 2026-02-27
- 21.0.1 — 2026-02-27
- 21.0.0 — 2026-02-10
- 17.0.0 — 2024-01-25
- 3.2.1 — 2022-08-30
- 3.2.0 — 2022-04-27
- 3.1.0 — 2022-04-26
- 3.0.0 — 2022-04-25
- 2.2.1 — 2021-04-06
- 2.2.0 — 2021-04-06
- 2.1.3 — 2021-03-28
- 2.1.2 — 2021-03-26
- 2.1.1 — 2021-03-26
- … 7 more at https://npm.io/package/@dintecom/ngx-help-ext/versions

## README

# ngx-help-ext

## Install

- `npm install @dintecom/ngx-help-ext`
- install `npm install @angular/cdk dompurify` - peer dependencies of ngx-help-ext

## Setup

### Add CSS

- If you are using sass you can import the css

```scss
@import "@dintecom/ngx-help-ext/default";
```

- If you are using angular-cli you can add it to your angular.json

```json
"styles": [
  "node_modules/@dintecom/ngx-help-ext/default.css"
]
```

- You can also customize the theme

```scss
@use "@dintecom/ngx-help-ext" as help-ext;

@include help-ext.theme(
  (
    color: (
      icon-color: blue,
      link-color: blue,
      caption-color: gray,
      border-color: gray,
      code-color: black,
      code-background-color: light-gray,
      flyout-color: black,
      flyout-background-color: white,
      flyout-box-shadow: none,
    ),
    typography: (
      font-family: Roboto,
    ),
  ),
  $prefix: "my-help-ext"
);
@include help-ext.core();
```

- If you are using Angular Material themes

```scss
@use "@dintecom/ngx-help-ext" as help-ext;

@include help-ext.mat-theme();
@include help-ext.core();
```

### Provide config options

```typescript
import { provideEnvironmentHelpExt } from 'ngx-help-ext';

bootstrapApplication(App, {
    providers: [
        (...)
        provideEnvironmentHelpExt({
            helpExtUrl: 'https://helpext.com',
        }),
        (...)
    ],
}).catch((err) => console.error(err));
```

### You can also configure HelpExt address resolver

```typescript
import { provideEnvironmentHelpExt, HelpExtUrlResolver } from 'ngx-help-ext';

export class CustomHelpExtUrlResolver implements HelpExtUrlResolver {
  private readonly config = inject(ConfigService);

  resolve(): string {
    return this.config.getHelpExtUrl();
  }

  // Or use Observable
  resolve(): Observable<string> {
    return this.config.getHelpExtUrlAsync();
  }
}

bootstrapApplication(App, {
    providers: [
        (...)
        provideEnvironmentHelpExt({
            helpExtUrlResolver: {
                provide: HelpExtUrlResolver,
                useClass: CustomHelpExtUrlResolver,
                deps: [ConfigService],
            },
        }),
        (...)
    ],
}).catch((err) => console.error(err));
```

### Configure cache lifetime

```typescript
bootstrapApplication(App, {
    providers: [
        (...)
        provideEnvironmentHelpExt({
            (...)
            cacheLifetimeSecond: 10 * 60, // 10 minutes
        }),
        (...)
    ],
}).catch((err) => console.error(err));
```

### Add HTTP context (example for [@ngx-loading-bar](https://github.com/aitboudad/ngx-loading-bar#ignoring-particular-requests) 6)

```typescript
bootstrapApplication(App, {
    providers: [
        (...)
        provideEnvironmentHelpExt({
            (...)
            httpContext: new HttpContext().set(NGX_LOADING_BAR_IGNORED, true),
        }),
        (...)
    ],
}).catch((err) => console.error(err));
```

### Add HTTP headers (example for [@ngx-loading-bar](https://github.com/aitboudad/ngx-loading-bar) 4,5)

```typescript
bootstrapApplication(App, {
    providers: [
        (...)
        provideEnvironmentHelpExt({
            (...)
            httpHeaders: {
                ignoreLoadingBar: '',
            },
        }),
        (...)
    ],
}).catch((err) => console.error(err));
```

### Config options feature level

```typescript
@Component({
    selector: 'my-feature',
    templateUrl: './my-feature.component.html',
    imports: [HelpExtComponent, (...)],
    providers: [
          (...)
          provideHelpExt({
            (...)
          }),
          (...)
    ],
})
export class MyFeatureComponent {}
```

## Usage

```html
<help-ext articleId="1"></help-ext>
<help-ext articleUid="article-uid"></help-ext>
<help-ext [byLocation]="true"></help-ext>
```

## Options

| Name          | Type   | Description                                                                                   | Default |
| ------------- | ------ | --------------------------------------------------------------------------------------------- | ------- |
| articleId     | @Input | Get article by ID.                                                                            | null    |
| articleUid    | @Input | Get article by UID.                                                                           | null    |
| byLocation    | @Input | Get article by current page URL. Automatic subscribe on router NavigationEnd event.           | false   |
| alwaysVisible | @Input | Show dimmed if the article failed to load.                                                    | true    |
| inline        | @Input | Automatically sizing the icon to match the font size of the element the icon is contained in. | false   |

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