src/app/core/common-components/help-button/help-button.component.ts
Display a help button that shows the user additional guidance and explanations when necessary as the user clicks on it.
| selector | app-help-button |
| imports |
FontAwesomeModule
MatButtonModule
MatTooltipModule
|
| styleUrls | ./help-button.component.scss |
| templateUrl | ./help-button.component.html |
Inputs |
| text | |
Type : string
|
|
|
Help text to be displayed |
|
import { Component, Input } from "@angular/core";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { MatButtonModule } from "@angular/material/button";
import { MatTooltipModule } from "@angular/material/tooltip";
/**
* Display a help button that shows the user additional guidance and explanations when necessary
* as the user clicks on it.
*/
@Component({
selector: "app-help-button",
templateUrl: "./help-button.component.html",
styleUrls: ["./help-button.component.scss"],
imports: [FontAwesomeModule, MatButtonModule, MatTooltipModule],
})
export class HelpButtonComponent {
/**
* Help text to be displayed
*/
@Input() text: string;
}
@if (text) {
<button
mat-icon-button
type="button"
#tooltipElement="matTooltip"
[matTooltip]="text"
(click)="tooltipElement.show()"
>
<fa-icon icon="question-circle"></fa-icon>
</button>
}
./help-button.component.scss