src/app/features/coming-soon/beta-feature/beta-feature.component.ts
Simple banner to mark a feature as "beta" and inform users of possibly limited functionality.
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | app-beta-feature |
| standalone | true |
| imports |
MatTooltip
MatCard
|
| styleUrls | ./beta-feature.component.scss |
| templateUrl | ./beta-feature.component.html |
| styleUrl | ./beta-feature.component.scss |
MatTooltip
MatCard
FaIconComponent
import { Component, ChangeDetectionStrategy } from "@angular/core";
import { MatTooltip } from "@angular/material/tooltip";
import { MatCard } from "@angular/material/card";
import { FaIconComponent } from "@fortawesome/angular-fontawesome";
/**
* Simple banner to mark a feature as "beta" and inform users of possibly limited functionality.
*/
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-beta-feature",
imports: [MatTooltip, MatCard, FaIconComponent],
templateUrl: "./beta-feature.component.html",
styleUrl: "./beta-feature.component.scss",
})
export class BetaFeatureComponent {}
<mat-card
class="banner-container"
matTooltip="This feature is overall still under development. You might experience some issues or limited functionality. We appreciate your feedback, please contact our User Support with your problems and suggestions."
i18n-matTooltip
>
<fa-icon icon="person-digging"></fa-icon>
<span i18n>Beta Feature</span>
</mat-card>
./beta-feature.component.scss
@use "variables/colors";
.banner-container {
margin: 1em;
padding: 0.5em;
background-color: colors.$accent;
color: white;
font-weight: bolder;
text-align: center;
}