src/lib/window-task-bar/window-task/window-task.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | rxap-window-task |
| imports |
NgClass
NgIf
MatIconModule
IconDirective
MatButtonModule
StopPropagationDirective
AsyncPipe
|
| styleUrls | ./window-task.component.scss |
| templateUrl | ./window-task.component.html |
Methods |
Inputs |
| window | |
Type : WindowRef<any>
|
|
| Required : true | |
| Public close |
close()
|
|
Returns :
void
|
| Public reopen |
reopen()
|
|
Returns :
void
|
import {
ChangeDetectionStrategy,
Component,
Input,
} from '@angular/core';
import { WindowRef } from '../../window-ref';
import { StopPropagationDirective } from '@rxap/directives';
import { MatButtonModule } from '@angular/material/button';
import { IconDirective } from '@rxap/material-directives/icon';
import { MatIconModule } from '@angular/material/icon';
import {
AsyncPipe,
NgClass,
NgIf,
} from '@angular/common';
@Component({
selector: 'rxap-window-task',
templateUrl: './window-task.component.html',
styleUrls: ['./window-task.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
NgClass,
NgIf,
MatIconModule,
IconDirective,
MatButtonModule,
StopPropagationDirective,
AsyncPipe,
]
})
export class WindowTaskComponent {
@Input({ required: true }) public window!: WindowRef<any>;
public close() {
this.window.complete();
}
public reopen() {
this.window.reopen();
}
}
<div (click)="reopen()" [ngClass]="{ minimized: window.isMinimized }"
class="rxap-container mat-elevation-z2 flex flex-row justify-start items-center gap-2">
<ng-template [ngIf]="window.settings$ | async" let-settings>
<mat-icon *ngIf="settings.icon" [rxapIcon]="settings.icon"></mat-icon>
<h3 *ngIf="settings.title" class="grow">{{settings.title}}</h3>
</ng-template>
<button (click)="close()" mat-icon-button rxapStopPropagation type="button">
<mat-icon>close</mat-icon>
</button>
</div>
./window-task.component.scss
.rxap-container {
padding: 5px;
cursor: pointer;
&.minimized {
opacity: 0.5;
}
}