src/app/core/common-components/view-title/view-title.component.ts
Building block for views, providing a consistent layout to a title section for both dialog and routed views.
AfterViewInit
selector | app-view-title |
imports |
NgIf
MatButtonModule
MatTooltipModule
FontAwesomeModule
NgTemplateOutlet
|
styleUrls | ./view-title.component.scss |
templateUrl | ./view-title.component.html |
Properties |
Methods |
|
Inputs |
HostBindings |
constructor(router: Router, location: Location, viewContext: ViewComponentContext)
|
||||||||||||
Parameters :
|
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 |
class |
Type : string
|
Default value : "mat-title"
|
Async navigateBack |
navigateBack()
|
Returns :
any
|
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;
}