ngx-help-ext

Install

• npm install @dintecom/ngx-help-ext
• install npm install @angular/cdk - 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 "sass:map";
@use "@dintecom/ngx-help-ext" as help-ext;
@use "@dintecom/ngx-help-ext/scss/variables" as help-ext-vars;

@include help-ext.help-ext-core();
@include help-ext.help-ext-colors(
  $icon-color: map.get(help-ext-vars.$help-ext-light-theme-foreground, "icon"),
  $link-color: map.get(help-ext-vars.$help-ext-light-theme-foreground, "link"),
  $caption-color: map.get(help-ext-vars.$help-ext-light-theme-foreground, "caption"),
  $border-color: map.get(help-ext-vars.$help-ext-light-theme-foreground, "border"),
  $code-color: map.get(help-ext-vars.$help-ext-light-theme-foreground, "code"),
  $code-background-color: map.get(help-ext-vars.$help-ext-light-theme-background, "code"),
  $flyout-color: map.get(help-ext-vars.$help-ext-light-theme-foreground, "text"),
  $flyout-background-color: map.get(help-ext-vars.$help-ext-light-theme-background, "background"),
  $flyout-box-shadow: map.get(help-ext-vars.$help-ext-light-theme-background, "shadow")
);

• If you are using Angular Material themes

@use "sass:map";
@use "@dintecom/ngx-help-ext" as help-ext;

@mixin define-theme($theme) {
  ...
  @include help-ext.help-ext-core();
  @include help-ext.mat-help-ext-colors($theme);
}

Provide config options

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

bootstrapApplication(AppComponent, {
    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 {
  constructor(private readonly config: ConfigService) { }

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

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

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

Configure cache lifetime

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

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

bootstrapApplication(AppComponent, {
    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(AppComponent, {
    providers: [
        (...)
        provideEnvironmentHelpExt({
            (...)
            httpHeaders: {
                ignoreLoadingBar: '',
            },
        }),
        (...)
    ],
}).catch((err) => console.error(err));

Config options feature level

@Component({
    selector: 'my-feature',
    templateUrl: './my-feature.component.html',
    standalone: true,
    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 |