### File

`src/lib/window-task-bar/window-task-bar-container/window-task-bar-container.component.ts`

### Metadata

selector | `rxap-window-task-bar-container`
imports | `NgIf` `MatButtonModule` `MatBadgeModule` `MatIconModule` `MatToolbarModule` `WindowTaskBarComponent` `NgClass`
styleUrls | `./window-task-bar-container.component.scss`
templateUrl | `./window-task-bar-container.component.html`

### Index

###### Properties
Public expand Public windowService

### Constructor

`constructor(windowService: WindowService, settings: WindowTaskBarContainerSettings | null)`
Defined in src/lib/window-task-bar/window-task-bar-container/window-task-bar-container.component.ts:40
Parameters :
Name | Type | Optional
windowService | `WindowService` | No
settings | `WindowTaskBarContainerSettings | null` | No

### Properties

Public expand
Default value : `true`
Defined in src/lib/window-task-bar/window-task-bar-container/window-task-bar-container.component.ts:40

Public windowService
Type : `WindowService`
Decorators : `@Inject(WindowService)`
Defined in src/lib/window-task-bar/window-task-bar-container/window-task-bar-container.component.ts:44

    import {
      Component,
      Inject,
      InjectionToken,
      Optional,
    } from '@angular/core';
    import { WindowService } from '../../window.service';
    import { WindowTaskBarComponent } from '../window-task-bar.component';
    import { MatToolbarModule } from '@angular/material/toolbar';
    import { MatIconModule } from '@angular/material/icon';
    import { MatBadgeModule } from '@angular/material/badge';
    import { MatButtonModule } from '@angular/material/button';
    import {
      NgClass,
      NgIf,
    } from '@angular/common';

    export interface WindowTaskBarContainerSettings {
      expand?: boolean;
    }

    export const RXAP_WINDOW_TASK_BAR_CONTAINER_SETTINGS = new InjectionToken('rxap/window-system/task-bar-container');

    @Component({
        selector: 'rxap-window-task-bar-container',
        templateUrl: './window-task-bar-container.component.html',
        styleUrls: ['./window-task-bar-container.component.scss'],
        imports: [
            NgIf,
            MatButtonModule,
            MatBadgeModule,
            MatIconModule,
            MatToolbarModule,
            WindowTaskBarComponent,
            NgClass,
        ]
    })
    export class WindowTaskBarContainerComponent {

      public expand = true;

      constructor(
        @Inject(WindowService)
        public windowService: WindowService,
        @Optional()
        @Inject(RXAP_WINDOW_TASK_BAR_CONTAINER_SETTINGS)
          settings: WindowTaskBarContainerSettings | null = null,
      ) {
        if (settings) {
          if (settings.expand !== undefined) {
            this.expand = settings.expand;
          }
        }
      }

    }

    <div *ngIf="windowService.hasActiveWindows" class="rxap-container flex flex-col">
      <div class="flex flex-row justify-end items-end">
        <button (click)="expand = !expand"
                [matBadgeHidden]="!windowService.hasActiveWindows"
                [matBadge]="windowService.activeWindowCount.toFixed(0)"
                class="pin"
                color="primary"
                mat-icon-button
                matBadgePosition="above before"
                type="button">
          <mat-icon *ngIf="!expand">keyboard_arrow_up</mat-icon>
          <mat-icon *ngIf="expand">keyboard_arrow_down</mat-icon>
        </button>
      </div>
      <mat-toolbar [ngClass]="{ hidden: !expand }" class="tasks">
        <rxap-window-task-bar></rxap-window-task-bar>
      </mat-toolbar>
    </div>

`./window-task-bar-container.component.scss`

    .rxap-container {

      .pin {
        border: none;
        border-radius: 50% 50% 0 0;
        cursor: pointer;
      }

      .tasks {
        height: auto;
        padding: 16px;
      }

    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""