Header Bar

The <go-header-bar> component should be used for the title of a detail page and can incorporate form submit buttons

Back Arrow

The Header Bar can optionally include a back arrow on the left and buttons on the right

Back Arrow

@Input() showBackArrow: boolean = true

Bindings


  @Input() title: string;
  @Input() showBackArrow: boolean;
  @Output() handleBackButton: EventEmitter<any>;

title will display the title on the left side of the Header Bar

showBackArrow will show or hide the back arrow

handleBackButton would be a custom function to be called when the back button is clicked. If no function is bound, window.history.back() will be called.

Example


  <ng-template goHeaderBar heading="Header Bar Example" (handleBackButton)="customBackFunction" [showBackArrow]="true">
    <div class="go-button-group">
      <div class="go-button-group__item">
        <go-button>Cancel</go-button>
      </div>
      <div class="go-button-group__item">
        <go-button>Save</go-button>
      </div>
    </div>
  </ng-template>