ng6-golden-layout
![Liberapay](https://img.shields.io/liberapay/receives/embeddedenterprises.svg?logo=liberapay)
This project aims to provide a complete solution for embedding golden-layout within an angular 6 application.
Thanks to the awesome people at
which make testing for IE/Edge possible!
Usage
Install via npm:
$ npm install --save @embedded-enterprises/ng6-golden-layout
A manual install of package dependencies will be necessary, too
$ npm install --save golden-layout@1.5.7 jquery
$ npm install --save-dev @types/jquery
Importing and configuration:
import { GoldenLayoutModule, GoldenLayoutConfiguration } from '@embedded-enterprises/ng6-golden-layout';
import * as $ from 'jquery';
window['$'] = $;
const config: GoldenLayoutConfiguration = { };
@NgModule({
imports: [
GoldenLayoutModule.forRoot(config),
],
declarations: [
],
entryComponents: [
],
})
export class AppModule {}
In the @NgModule
decorator, under entryComponents
list all the components that should be rendered within golden layout.
Define the GoldenLayoutConfiguration
object:
Add <golden-layout-root></golden-layout-root>
to your HTML.
Finally import GoldenLayout styles into styles.css
@import "~golden-layout/src/css/goldenlayout-base.css";
@import "~golden-layout/src/css/goldenlayout-light-theme.css";
body, html {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}
After that it should work right away out of the box.
Accessing the underlying GoldenLayout API
The original GoldenLayout API may be obtained through the Angular dependency injection mechanism in any of the components rendered with GoldenLayout.
import * as GoldenLayout from 'golden-layout';
import { Component, Inject } from '@angular/core';
import { GoldenLayoutContainer } from '@embedded-enterprises/ng6-golden-layout';
@Component({})
export class TestComponent {
constructor(
private goldenLayout: GoldenLayout,
@Inject(GoldenLayoutContainer) private container: GoldenLayout.Container
) { }
}
These objects can then be used to manipulate the GoldenLayout.
Synchronizing your services across multiple browser windows
All services used within your app can be chosen to be either scoped to the current window (default) or to be the same instance across all windows (like a singleton).
To use services across multiple windows, you need to initialize the multi-window compatibility layer.
import { MultiWindowInit } from '@embedded-enterprises/ng6-golden-layout';
MultiWindowInit();
To synchronize a service, use the @MultiWindowService()
decorator:
@MultiWindowService<YourService>()
@Injectable()
class YourService {
}
NOTE: This only works once per service instance, it will destroy scoped services!
Provide a fallback for invalid component configurations
If you want to remove a component type, but don't want your users to clear the entire state, you can use the fallback
component.
It works by creating a component, like this:
import { FailedComponent } from '@embedded-enterprises/ng6-golden-layout';
@Component({
selector: `app-invalid`,
template: `<h1>Component {{componentName}} couldn't be found`,
})
class InvalidComponent {
constructor(@Inject(FailedComponent) public componentName: string) { }
}
After that, you inject the previously created component into the GoldenLayout binding like this:
import { FallbackComponent } from '@embedded-enterprises/ng6-golden-layout';
@NgModule({
providers: [
{
provide: FallbackComponent,
useValue: InvalidComponent,
},
],
declarations: [
InvalidComponent,
],
entryComponents: [
InvalidComponent,
],
})
export class MyModule { }
When you have setup this, the binding will automatically create this component whenever a panel type couldn't be found.
Current state
This binding is stable but by far not feature complete.
Roadmap
Automatic service InjectionMake Configuration more robust (it currently fails if it can't find a pane)- Provide possibility to spawn and register new Panes on the fly
- Improve redocking algorithm
Hacking
- Fork the repository
- Create a feature/bugfix branch
- If you want to work on the binding, use
build.sh
or npm run build
to create the npm package and link it into the example project. - If you want to work on the example project, just use ng serve to have the dev-server.
- If you are happy, make a PR.
Contributions are welcome!