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

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

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

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

• You can also customize the theme

@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

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

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

Provide config options

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

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

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

Add HTTP context (example for @ngx-loading-bar 6)

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 4,5)

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

Config options feature level

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

Usage

<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 |