File
Constructor
constructor(context: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| context |
any
|
No
|
|
import {
ChangeDetectionStrategy,
Component,
Inject,
} from '@angular/core';
import { WindowRef } from '../window-ref';
import { RXAP_WINDOW_CONTEXT } from '../tokens';
import { MatButtonModule } from '@angular/material/button';
import { IconDirective } from '@rxap/material-directives/icon';
import { MatIconModule } from '@angular/material/icon';
import { PortalModule } from '@angular/cdk/portal';
import {
AsyncPipe,
NgIf,
} from '@angular/common';
import { MatToolbarModule } from '@angular/material/toolbar';
@Component({
selector: 'rxap-window-tool-bar',
templateUrl: './window-tool-bar.component.html',
styleUrls: ['./window-tool-bar.component.scss'],
changeDetection: ChangeDetectionStrategy.Default,
imports: [
MatToolbarModule,
NgIf,
PortalModule,
MatIconModule,
IconDirective,
MatButtonModule,
AsyncPipe,
]
})
export class WindowToolBarComponent<D> {
public windowRef: WindowRef<D>;
constructor(@Inject(RXAP_WINDOW_CONTEXT) context: any) {
this.windowRef = context.windowRef;
}
}
<mat-toolbar class="header flex flex-row items-center justify-between gap-x-4">
<div class="flex flex-row justify-end items-center gap-x-3">
<ng-template [ngIfElse]="titleFromSettings" [ngIf]="windowRef.titlePortal$ | async" let-titlePortal>
<ng-template [cdkPortalOutlet]="titlePortal"></ng-template>
</ng-template>
<ng-template #titleFromSettings>
<ng-template [ngIf]="windowRef.settings$ | async" let-settings>
<mat-icon *ngIf="settings.icon" [rxapIcon]="settings.icon"></mat-icon>
<h3 *ngIf="settings.title">{{settings.title}}</h3>
</ng-template>
</ng-template>
</div>
<div class="flex flex-row justify-end items-center">
<button (click)="windowRef.minimize()" *ngIf="windowRef.minimizable !== false"
mat-icon-button type="button">
<mat-icon>minimize</mat-icon>
</button>
<button (click)="windowRef.fullScreen()" mat-icon-button type="button">
<mat-icon>fullscreen</mat-icon>
</button>
<button (click)="windowRef.complete()" mat-icon-button type="button">
<mat-icon>close</mat-icon>
</button>
</div>
</mat-toolbar>
:host {
width: 100%;
}
.header {
height: 64px;
}
Legend
Html element with directive