src/app/core/common-components/feature-disabled-info/feature-disabled-info.component.ts
Component that displays information when a feature is disabled or loading. Handles three states: loading (undefined), disabled (false), and enabled (true - shows nothing).
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | app-feature-disabled-info |
| standalone | true |
| imports |
MatProgressBar
|
| styleUrls | ./feature-disabled-info.component.scss |
| templateUrl | ./feature-disabled-info.component.html |
| styleUrl | ./feature-disabled-info.component.scss |
Properties |
|
Inputs |
| compactView | |
Type : boolean
|
|
Default value : false
|
|
|
Whether to use a compact view (less text) |
|
| featureEnabled | |
Type : boolean | undefined
|
|
|
Whether the feature is enabled (true), disabled (false), or loading (undefined) |
|
| featureName | |
Type : string
|
|
Default value : $localize`this feature`
|
|
|
The name of the feature that is disabled (e.g., "Export API", "Notifications") |
|
| Protected Readonly navigator |
Type : Navigator
|
Default value : inject(NAVIGATOR_TOKEN)
|
import { NAVIGATOR_TOKEN } from "#src/app/utils/di-tokens";
import {
Component,
inject,
input,
ChangeDetectionStrategy,
} from "@angular/core";
import { MatProgressBar } from "@angular/material/progress-bar";
/**
* Component that displays information when a feature is disabled or loading.
* Handles three states: loading (undefined), disabled (false), and enabled (true - shows nothing).
*/
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-feature-disabled-info",
templateUrl: "./feature-disabled-info.component.html",
styleUrl: "./feature-disabled-info.component.scss",
imports: [MatProgressBar],
})
export class FeatureDisabledInfoComponent {
protected readonly navigator: Navigator = inject(NAVIGATOR_TOKEN);
/** The name of the feature that is disabled (e.g., "Export API", "Notifications") */
featureName = input<string>($localize`this feature`);
/** Whether the feature is enabled (true), disabled (false), or loading (undefined) */
featureEnabled = input<boolean | undefined>();
/** Whether to use a compact view (less text) */
compactView = input<boolean>(false);
}
@if (featureEnabled() === undefined) {
<div class="feature-disabled-box">
<mat-progress-bar
mode="indeterminate"
style="margin-bottom: 1rem"
></mat-progress-bar>
<p i18n>
Checking if this feature is enabled for your system. This may take a few
seconds...
</p>
</div>
} @else if (featureEnabled() === false) {
<div class="feature-disabled-box">
@if (!navigator.onLine) {
<h2 i18n>You are currently offline.</h2>
<p i18n>
Please reconnect to the internet to activate. We could not check if this
feature is enabled for your system.
</p>
} @else if (compactView()) {
<p class="color-error">
<span i18n>This feature is currently not enabled for your system.</span
>&ngsp;<span i18n
>Please contact your system administrator to enable it.</span
>
</p>
} @else {
<h2 i18n>This feature is currently not enabled for your system.</h2>
<p i18n>Please contact your system administrator to enable it.</p>
<p i18n>
If {{ featureName() }} has been enabled and you are still seeing this
message, there may be an issue with your internet connection or a
temporary technical issue on the server. If this persists, please also
contact your administrator.
</p>
}
</div>
}
./feature-disabled-info.component.scss
@use "variables/colors";
@use "variables/sizes";
.feature-disabled-box {
background-color: colors.$disabled-transparent;
padding: sizes.$regular;
border-radius: sizes.$small;
}