Awesome

Angular Windows

Angular version: 18.1.0

Previous versions of Angular aren't supported.

License: ISC

Using Angular Windows

Installation

Install ngx-windows: npm i ngx-windows. Edit, build and use in example app: npm run update-ngx-windows.

Add ngx-windows style to your angular.json config file:

"styles": [
  "./node_modules/ngx-windows/ngx-windows-style.css",
  "src/styles.scss"
]

Usage

1. You should provide NgwWindowsManagerService in app config or if you need multiple instances - in specific component that will contain windows.

2. Add NgwWindowsContainerComponent to your template

<ngw-windows-container [style]="{width: '100vw', height: '100vh'}"/>

You must set width and height of this container for windows.

Current version uses only window inner width and height.

3. Creating window

In any component inject NgwWindowsManagerService and use it commands to control, filter and manage windows globally. You must provide class of component that will be displayed inside window. Component should have overflow:auto, width:100% and height:100% for more fail-safe experience. If you want to change window component while window is already active you need to use NgwWindowsManagerService.findFN.component = AnotherComponent.

export class YourComponent {
  constructor(public nwm: NgwWindowsManagerService,
              private destroyRef: DestroyRef) {
    const win = this.nwm.createWindow({
      name: 'Test Window',
      component: TestWindowComponent
    });
    win.onRegister$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(service => {
        // Change window properties after it's registered...
      });
    // Don't change window properties through win.service here - explaination in HowItWorks section
  }
}

Your window component <b>must</b> contain windowController input!

  windowController = input.required<NgwWindowControllerService>();

Also, remember to set window placement after register:

constructor(private nwm: NgwWindowsManagerService) {
  const win = this.nwm.createWindow({
    name: 'My Window',
    component: TestCpmComponent
  });

  win.onRegister$
    .pipe(takeUntilDestroyed())
    .subscribe(service => {
      service.placementSvc.setAll(
        800,
        600,
        30,
        30
      );
    });
}

HowItWorks

When you call NgwWindowsManagerService.createWindow function adds default properties, ID and onRegister$ Subject to window object and pushes it to activeWindows. After pushed, it's rendered inside NgwWindowsContainerComponent as NgwWindowComponent that calls NgwWindowsManagerService.register after initialization of its service and self. onRegister$: Subject<NgwWindowControllerService> was called after registration which means that you can use all properties and services inside NgwWindowComponent.

Examples

Simple window

src/app/app.component - creating window after init

src/app/test-app - window contents

Window with close confirmation dialog

src/app/app.component - add button

src/app/close-confirm-dialog-example - primary window with close confirmation checkbox

src/app/close-confirm-dialog - close confirmation dialog that fires close/cancel event to parent

API

NgwWindowsManagerService

[!WARNING] Functions that update window properties, add window or remove window uses write operations. If you want to use these functions in effect then you need to set effect property {allowWriteSignals: true}.

NgwWindowControllerService

Each window has its own instance of NgwWindowControllerService that can be accessed via NgwWindowsManagerService.createWindow(...).onRegister$ or NgwWindowsManagerService.findFN.service (after initialization). It's also passed to window app component as required input windowController: InputSignal<NgwWindowControllerService>.

[!WARNING] Functions that update window properties, add window or remove window uses write operations. If you want to use these functions in effect then you need to set effect property {allowWriteSignals: true}.

NgwWindowConfigurationService

Provided in and used by NgwWindowComponent.

NgwWindowPlacementService

Provided in and used by NgwWindowComponent.

NgwWindowStateService

Provided in and used by NgwWindowComponent.

Styling

You can create custom scss file with styles and import it in your styles.scss file. Example file can be found in public/custom-window-style.scss file.

Default style:

ngw-window {
  &:not(.transparent) {
    background: #efefef !important;
  }

  &:not(&.borderless) {
    border: solid 1px #373737;
  }

  &:not(&.noshadow) {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
  }

  &.focused:not(&.noshadow) {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, .35),
    1px 1px 4px rgba(0, 0, 0, .2);
  }

  .ngw-window-topbar {
    background: #373737;
    color: #fff;
  }

  ngw-icon:hover {
    background-color: rgba(255, 255, 255, .15);
  }

  .ngw-window-content {
    color: #000;
    padding: 0;
  }
}

ngw-windows-container .ngw-window-placement-prediction.show {
  background-color: rgba(150, 200, 255, .5);
  border: solid 2px rgba(150, 200, 255, .95);
  backdrop-filter: blur(1px);
}

ngw-icon svg path {
  fill: #fff;
  stroke: #fff;
}

Testing

Running tests: npm run test-ngx-windows.

TODO

• Fix ExpressionChangedAfterItHasBeenCheckedError error after window creation