### File

`src/lib/window-tool-bar/window-tool-bar.component.ts`

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
selector | `rxap-window-tool-bar`
imports | `MatToolbarModule` `NgIf` `PortalModule` `MatIconModule` `IconDirective` `MatButtonModule` `AsyncPipe`
styleUrls | `./window-tool-bar.component.scss`
templateUrl | `./window-tool-bar.component.html`

### Index

###### Properties

- Public windowRef

### Constructor

`constructor(context: any)`
Defined in src/lib/window-tool-bar/window-tool-bar.component.ts:35

Parameters :

Name | Type | Optional
context | `any` | No

### Properties

Public windowRef
Type : `WindowRef<D>`
Defined in src/lib/window-tool-bar/window-tool-bar.component.ts:35

    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>

`./window-tool-bar.component.scss`

    :host {
      width: 100%;
    }

    .header {
      height: 64px;
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""