Code Documentation for design-system
  1. Components
  2. HelpButtonComponent

File

buttons/help-button/src/lib/help-button.component.ts

Description

Help button component that renders either a link or menu trigger

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector hra-help-button
imports MatIconModule PlainTooltipDirective MatMenuModule MatButtonModule
templateUrl ./help-button.component.html
styleUrl ./help-button.component.scss

Index

Inputs

Inputs

action
Type : string | MatMenuPanel
Required :  true
Defined in buttons/help-button/src/lib/help-button.component.ts:19

Action for the button - URL string for link or MatMenuPanel for menu

 
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule, MatMenuPanel } from '@angular/material/menu';
import { PlainTooltipDirective } from '@hra-ui/design-system/tooltips/plain-tooltip';

/**
 * Help button component that renders either a link or menu trigger
 */
@Component({
  selector: 'hra-help-button',
  imports: [MatIconModule, PlainTooltipDirective, MatMenuModule, MatButtonModule],
  templateUrl: './help-button.component.html',
  styleUrl: './help-button.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HelpButtonComponent {
  /** Action for the button - URL string for link or MatMenuPanel for menu */
  readonly action = input.required<string | MatMenuPanel>();
}

@let value = action();

@if (typeof value === 'string') {
  <a
    mat-icon-button
    aria-label="Visit help and documentation page"
    hraPlainTooltip="Help & documentation"
    [attr.href]="value"
  >
    <mat-icon>help</mat-icon>
  </a>
} @else {
  <button
    mat-icon-button
    aria-label="Open help and documentation menu"
    hraPlainTooltip="Help & documentation"
    [matMenuTriggerFor]="value"
  >
    <mat-icon>help</mat-icon>
  </button>
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""