{"id":19795098,"url":"https://github.com/embeddedenterprises/ng6-golden-layout","last_synced_at":"2025-05-01T03:30:20.226Z","repository":{"id":34315382,"uuid":"139707079","full_name":"EmbeddedEnterprises/ng6-golden-layout","owner":"EmbeddedEnterprises","description":"Golden-Layout binding for Angular 6/7/8...","archived":false,"fork":false,"pushed_at":"2023-03-08T04:11:59.000Z","size":2140,"stargazers_count":60,"open_issues_count":16,"forks_count":30,"subscribers_count":10,"default_branch":"ng8-electron","last_synced_at":"2025-04-06T08:06:27.065Z","etag":null,"topics":["angular","angular5","angular6","docking","docking-framework","docking-library","golden-layout","html5","layout","webapp"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EmbeddedEnterprises.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-07-04T10:28:56.000Z","updated_at":"2023-05-06T02:00:25.000Z","dependencies_parsed_at":"2023-01-15T06:16:22.666Z","dependency_job_id":"ad06bad2-723d-4d86-bb2d-6ddb4b0e3236","html_url":"https://github.com/EmbeddedEnterprises/ng6-golden-layout","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmbeddedEnterprises%2Fng6-golden-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmbeddedEnterprises%2Fng6-golden-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmbeddedEnterprises%2Fng6-golden-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmbeddedEnterprises%2Fng6-golden-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EmbeddedEnterprises","download_url":"https://codeload.github.com/EmbeddedEnterprises/ng6-golden-layout/tar.gz/refs/heads/ng8-electron","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251817797,"owners_count":21648807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular5","angular6","docking","docking-framework","docking-library","golden-layout","html5","layout","webapp"],"created_at":"2024-11-12T07:15:26.804Z","updated_at":"2025-05-01T03:30:19.881Z","avatar_url":"https://github.com/EmbeddedEnterprises.png","language":"TypeScript","funding_links":["https://liberapay.com/EmbeddedEnterprises/donate"],"categories":[],"sub_categories":[],"readme":"# ngx-golden-layout\n\n[![Downloads](https://img.shields.io/npm/dm/ngx-golden-layout.svg)](https://www.npmjs.com/package/ngx-golden-layout) [![NPM Version](https://img.shields.io/npm/v/ngx-golden-layout.svg)](https://www.npmjs.com/package/ngx-golden-layout)\n[![NPM Size](https://img.shields.io/bundlephobia/min/ngx-golden-layout.svg)](https://www.npmjs.com/package/ngx-golden-layout) [![Liberapay](https://img.shields.io/liberapay/receives/embeddedenterprises.svg?logo=liberapay)](https://liberapay.com/EmbeddedEnterprises/donate)\n\nThis project aims to provide a complete solution for embedding golden-layout within an angular 6+ application.\n\n- This package got a major rewrite for Angular 8+, in order to be able to use the official angular library tooling.\n- This document describes the Angular 8+ API, for the angular 6-7 API, please have a look at the ng6/ng7 branches.\n- To prevent confusion, the package also got renamed:\n  - For Angular 6/7 use `@embedded-enterprises/ng6-golden-layout@0.0.12`\n  - For Angular 8 and a drop-in compatible API (easier upgrade) use `ngx-golden-layout@0.0.12`\n  - To use the new API, use `ngx-golden-layout@0.0.17`\n\nThanks to the awesome people at https://www.browserstack.com which make testing for IE/Edge possible!\n\n## Complete example\n\nFor a complete example, head over to the https://github.com/EmbeddedEnterprises/ngx-golden-layout-electron repo.\n\n## Detailed Usage\n\nInstall via npm:\n\n```sh\n$ npm install --save ngx-golden-layout\n```\n\nA manual install of package dependencies will be necessary, too\n\n```sh\n$ npm install --save golden-layout@1.5.9 jquery\n$ npm install --save-dev @types/jquery\n```\n\nImporting and configuration:\n```ts\nimport { GoldenLayoutModule } from '@embedded-enterprises/ng6-golden-layout';\nimport * as $ from 'jquery';\n\n// It is required to have JQuery as global in the window object.\nwindow['$'] = $;\n\n// Define all component types known at compile time to the golden-layout binding.\n// It's possible to modify these at runtime using the `ComponentRegistryService`\nconst componentTypes: ComponentType[] = [{\n  name: 'name',\n  type: MyFancyAngularComponent,\n}];\n\n@NgModule({\n  imports: [\n    //...\n    GoldenLayoutModule.forRoot(componentTypes),\n  ],\n  declarations: [\n    // Add your panel components here\n    MyFancyAngularComponent,\n  ],\n})\nexport class AppModule {}\n```\n\nIn the `@NgModule` decorator, under `entryComponents` list all the components that should be rendered within golden layout.\n\nTo pass a layout into the golden-layout component, create an `Observable\u003cIExtendedGoldenLayoutConfig\u003e` and pass your layout/root config in. \nExample code could look like this:\n\n```ts\nimport { of } from 'rxjs';\n\nconst INITIAL_LAYOUT: IExtendedGoldenLayoutConfig = {\n  content: [{\n    type: 'row',\n    content: [{\n      type: 'component',\n      componentName: 'name', // The name defined in componentTypes\n      title: 'CustomTitle',\n    }, {\n      type: 'component',\n      componentName: 'name', // The name defined in componentTypes\n      title: 'Another Name',\n    }]\n  }]\n};\n\n@Component({\n  template: `\u003cdiv class=\"spawn-new\"\u003e\u003c/div\u003e\u003cgolden-layout-root [layout]=\"layoutConfig$\"\u003e\u003c/golden-layout-root\u003e`,\n  selector: `app-root`,\n})\nexport class RootComponent {\n  layoutConfig$ = of(INITIAL_LAYOUT);\n}\n```\n\nFinally import GoldenLayout styles into `styles.css`\n\n```css\n@import \"~golden-layout/src/css/goldenlayout-base.css\";\n@import \"~golden-layout/src/css/goldenlayout-light-theme.css\";\n\nbody, html {\n  width: 100vw;\n  height: 100vh;\n  padding: 0;\n  margin: 0;\n}\n```\n\nAfter that it should work right away out of the box.\n\n### Accessing the underlying GoldenLayout API\n\nThe original GoldenLayout API may be obtained through the Angular dependency injection mechanism in any of the components rendered with GoldenLayout.\n\n\n```ts\nimport * as GoldenLayout from 'golden-layout';\nimport { Component, Inject } from '@angular/core';\nimport { \n  GoldenLayoutContainer,\n  GoldenLayoutComponentHost,\n  GoldenLayoutComponent,\n} from '@embedded-enterprises/ng6-golden-layout';\n\n@Component({})\nexport class TestComponent {\n\n  constructor(\n    @Inject(GoldenLayoutComponentHost) private goldenLayout: GoldenLayoutComponent,\n    @Inject(GoldenLayoutContainer) private container: GoldenLayout.Container\n  ) {\n    this.goldenLayout.getGoldenLayout().selectItem(yourItem);\n  }\n}\n```\n\nThese objects can then be used to manipulate the GoldenLayout.\n**Important**: You must not cache the returned golden layout instance, as it might change as you pop out/in.\n\n### Component Lifecycle\n\nTo get a deeper understanding on how to hook into golden layout and angulars behavior, refer to [LIFECYCLE.md](LIFECYCLE.md)\n\n### Usage with angular routing\n\nWhen you use angular routing, angular will manipulate the URLs on the client side and therefore destroy navigation for your application when you're opening a popout. The solution is fairly simple: we disable the angular routing functionality for child windows.\n\nLet's assume your project looks like the following:\n\n```bash\nroot\n|-\u003esrc\n| |-\u003e main.ts\n| |-\u003e index.html\n| |-\u003e app\n| | |-\u003e app.module.ts\n| | |-\u003e login.component.ts\n| | |-\u003e main.component.ts\n| | x\n| x\n|-\u003e angular.json\nx\n```\n\nBasically we need to implement three things:\n- Remove the static component initialization\n- Add a second entry-NgModule to your app, where routing is disabled\n- Select the routing-disabled NgModule when we're detecting that we're in a child window.\n\nTo proceed, we need the following information:\n- The selector for your main component, where you bootstrap your app (lets call it `\u003capp-main\u003e`)\n- The selector for your component where you initialize the golden-layout instance (lets call it `\u003capp-docking\u003e`)\n\n#### Required Steps\n\n1. Open up your index.html, remove the selector of the main component (`\u003capp-main\u003e`)\n2. Open up your main.ts, find the lines where angular is bootstrapped (usually at the end of the file), remove them.\n3. Add the following code, replace the selectors with your selectors.\n\n```ts\nif (!window.opener) {\n  const baseRootElem = document.createElement('app-main');\n  const script = document.body.querySelector('script');\n  document.body.insertBefore(baseRootElem, script);\n  platformBrowserDynamic().bootstrapModule(AppModule);\n} else {\n  const baseAppElem = document.createElement('app-docking');\n  const script = document.body.querySelector('script');\n  document.body.insertBefore(baseAppElem, script);\n  platformBrowserDynamic().bootstrapModule(AppChildWindowModule);\n}\n```\n\n4. Open up your app/app.module.ts.\n  - Depending on your application, you usually have an AppModule where all your components are added and your `\u003capp-main\u003e` component is set as bootstrap.\n  - Create a second module, call it AppChildWindowModule, add your components, import required modules (**without the router module**) and set the `\u003capp-docking\u003e` component as bootstrap.\n  - For larger applications, you should organize your code into smaller NgModules which provide better scalability, since you don't need to add all declarations twice\n  - At the end you should have something like the following:\n\n```ts\nconst COMPONENTS = [\n  AppDockingComponent,\n  // Your dockable components,\n];\n\n@NgModule({\n  declarations: COMPONENTS,\n  exports: COMPONENTS,\n  imports: [CommonModule, GoldenLayoutModule.forRoot(CONFIG), /* Additional modules */],\n})\nexport class AppComponentsModule {}\n\n@NgModule({\n  imports: [RouterModule.forRoot(ROUTES), AppComponentsModule],\n  declarations: [AppMainComponent],\n  entryComponents: [AppMainComponent],\n  providers: [\n    // Your providers\n  ],\n  bootstrap: [AppMainComponent],\n})\nexport class AppModule { }\n\n@NgModule({\n  imports: [AppComponentsModule],\n  providers: [\n    // Your providers\n  ],\n  bootstrap: [AppDockingComponent], // Use your docking component here.\n})\nexport class AppChildWindowModule { }\n```\n\n5. Fixing the production build, two more changes are neccessary:\n  - set `useHash: true` in your call to `RouterModule.forRoot(ROUTES, { useHash: true })`\n  - if you don't set this, your index.html won't be found in production builds.\n  - add the following lines to your angular.json under `projects -\u003e $NAME -\u003e architect -\u003e build -\u003e configurations -\u003e production -\u003e fileReplacements`:\n  ```json\n  {\n    \"replace\": \"src/main.ts\",\n    \"with\": \"src/main.prod\",\n  }\n  ```\n  - copy your `src/main.ts` into `src/main.prod` (**Don't** name `main.prod` `main.prod.ts` otherwise you will get build errors!)\n  - edit the main.prod, do some search and replace:\n    - replace `platformBrowserDynamic` by `platformBrowser`\n    - replace `platform-browser-dynamic` by `platform-browser`\n    - replace `bootstrapModule` by `bootstrapModuleFactory`\n    - replace `AppModule` by `AppModuleNgFactory`\n    - replace `AppChildWindowModule` by `AppChildWindowModuleNgFactory`\n    - replace `app.module` by `app.module.ngfactory`\n  - Run a production build\n  - Should work now.\n\n\nThe effect of the changes done above is that we skip routing based on whether we're in a child window (no routing) or in the main window. When the route changes and the golden layout main-window component is destroyed, all child windows are disposed automatically.\n\nTo see a full-featured example including routing, have a look [here](https://github.com/EmbeddedEnterprises/ngx-golden-layout-electron).\n\n\n### Synchronizing your services across multiple browser windows\n\nAll 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).\n\nTo synchronize a service, use the `@MultiWindowService()` decorator:\n```ts\n@MultiWindowService\u003cYourService\u003e()\n@Injectable()\nclass YourService {\n  // implementation\n}\n```\n\n**NOTE:** This only works once per service instance, it will destroy scoped services!\n\n### Provide a fallback for invalid component configurations\n\nIf you want to remove a component type, but don't want your users to clear the entire state, you can use the fallback\ncomponent.\n\nIt works by creating a component, like this:\n\n```ts\nimport { FailedComponent } from '@embedded-enterprises/ng6-golden-layout';\n@Component({\n  selector: `app-invalid`,\n  template: `\u003ch1\u003eComponent {{componentName}} couldn't be found`,\n})\nclass InvalidComponent {\n  // The InjectionToken `FailedComponent` provides the name of the failed component.\n  // You can use this to implement arbitrarily complex error pages.\n  constructor(@Inject(FailedComponent) public componentName: string) { }\n}\n```\n\nAfter that, you pass the Component Type into the GoldenLayout.forRoot function like this:\n\n```ts\n// In your main NgModule\n@NgModule({\n  imports: [\n    GoldenLayoutModule.forRoot(COMPONENTS, InvalidComponent),\n  ],\n  declarations: [\n    //...\n    InvalidComponent,\n  ],\n})\nexport class MyModule { }\n```\n\nWhen you have setup this, the binding will automatically create this component whenever a panel type couldn't be found.\n\n## Nested layouts\n\nWith this module it is possible to initialize nested instances of golden-layout.\nTherefore you can have several different, independent docking steps.\n\nTo use it, call `GoldenLayoutModule.forChild()` within the providers array of a nested component in your application and initialize \na new GoldenLayoutComponent.\n\n```ts\n@Component({\n  selector: 'app-nested-gl',\n  templateUrl: './nested.component.html',\n  styleUrls: ['./nested.component.scss'],\n  providers: [\n    GoldenLayoutModule.forChild(components),\n  ]\n})\nexport class NestedComponent implements OnInit {\n\n  public layout$ = new BehaviorSubject(LAYOUT_CONFIG);\n\n  constructor() { }\n\n  ngOnInit(): void { }\n  stateChange() {\n\n  }\n  tabActivated() {\n\n  }\n```\n\nTemplate:\n\n```html\n\u003cgolden-layout-root #comp [layout]=\"layout$\" (stateChanged)=\"stateChange()\" (tabActivated)=\"tabActivated($event)\"\u003e\u003c/golden-layout-root\u003e\n```\n## Current state\n\nThis binding is stable but by far not feature complete.\n\n## Roadmap\n\n- ~~Automatic service Injection~~\n- ~~Make Configuration more robust (it currently fails if it can't find a pane)~~\n- ~~Provide possibility to spawn and register new Panes on the fly~~\n- Improve redocking algorithm\n\n## Hacking\n\n1. Fork the repository\n2. Create a feature/bugfix branch\n3. 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.\n4. If you want to work on the example project, just use ng serve to have the dev-server.\n5. If you are happy, make a PR.\n\nContributions are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fembeddedenterprises%2Fng6-golden-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fembeddedenterprises%2Fng6-golden-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fembeddedenterprises%2Fng6-golden-layout/lists"}