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 |