File

src/app/core/common-components/view-title/view-title.component.ts

Description

Building block for views, providing a consistent layout to a title section for both dialog and routed views.

Implements

AfterViewInit

Metadata

Index

Properties
Methods
Inputs
HostBindings

Constructor

constructor(router: Router, location: Location, viewContext: ViewComponentContext)
Parameters :
Name Type Optional
router Router No
location Location No
viewContext ViewComponentContext No

Inputs

disableBackButton
Type : boolean
Default value : false

(Optional) do not show button to navigate back to the parent page

displayInPlace
Type : boolean
title
Type : string

The page title to be displayed

HostBindings

class
Type : string
Default value : "mat-title"

Methods

Async navigateBack
navigateBack()
Returns : any

Properties

extraClasses
Type : string
Default value : "mat-title"
Decorators :
@HostBinding('class')
navigateToParentBehaviour
Type : boolean
Default value : false

whether instead of a basic back to previous page navigation the back button should navigate to logical parent page

Readonly parentUrl
Type : string
template
Type : TemplateRef<any>
Decorators :
@ViewChild('template')
import {
  AfterViewInit,
  Component,
  HostBinding,
  Input,
  Optional,
  TemplateRef,
  ViewChild,
} from "@angular/core";
import { getUrlWithoutParams } from "../../../utils/utils";
import { Router } from "@angular/router";
import { Location, NgIf, NgTemplateOutlet } from "@angular/common";
import { MatButtonModule } from "@angular/material/button";
import { MatTooltipModule } from "@angular/material/tooltip";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { ViewComponentContext } from "../../ui/abstract-view/view-component-context";

/**
 * Building block for views, providing a consistent layout to a title section
 * for both dialog and routed views.
 */
@Component({
  selector: "app-view-title",
  templateUrl: "./view-title.component.html",
  styleUrls: ["./view-title.component.scss"],
  imports: [
    NgIf,
    MatButtonModule,
    MatTooltipModule,
    FontAwesomeModule,
    NgTemplateOutlet,
  ],
})
export class ViewTitleComponent implements AfterViewInit {
  @ViewChild("template") template: TemplateRef<any>;

  /** The page title to be displayed */
  @Input() title: string;

  /** (Optional) do not show button to navigate back to the parent page */
  @Input() disableBackButton: boolean = false;

  /**
   * whether instead of a basic back to previous page navigation the back button should navigate to logical parent page
   */
  navigateToParentBehaviour: boolean = false;

  readonly parentUrl: string;

  constructor(
    private router: Router,
    private location: Location,
    @Optional() protected viewContext: ViewComponentContext,
  ) {
    this.parentUrl = this.findParentUrl();

    if (this.viewContext?.isDialog) {
      this.disableBackButton = true;
    }
  }

  ngAfterViewInit(): void {
    if (this.viewContext && !this.displayInPlace) {
      setTimeout(() => (this.viewContext.title = this));
    }
  }

  private findParentUrl(): string {
    const currentUrl = getUrlWithoutParams(this.router);
    const lastUrlSegmentStart = currentUrl.lastIndexOf("/");
    if (lastUrlSegmentStart < 1) {
      // do not navigate to root
      return null;
    }

    return currentUrl.substring(0, lastUrlSegmentStart);
  }

  async navigateBack() {
    if (this.navigateToParentBehaviour && this.parentUrl) {
      await this.router.navigate([this.parentUrl]);
    } else {
      this.location.back();
    }
  }

  @HostBinding("class") extraClasses = "mat-title";
  @Input() displayInPlace!: boolean;
}
<ng-template #template>
  <div class="container flex-row">
    <button
      *ngIf="(parentUrl || !navigateToParentBehaviour) && !disableBackButton"
      mat-icon-button
      (click)="navigateBack()"
      i18n-matTooltip="Generic back button"
      matTooltip="Back"
    >
      <fa-icon icon="arrow-left"></fa-icon>
    </button>

    <h1 class="remove-margin-bottom flex-grow">
      <ng-content></ng-content>
    </h1>
  </div>
</ng-template>

@if (!viewContext || displayInPlace) {
  <ng-container *ngTemplateOutlet="template"></ng-container>
}

./view-title.component.scss

.container {
  align-items: center;
  margin-bottom: 0 !important;
}

.back-button {
  position: relative;
  left: -12px;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""