embeddedenterprises / ng6-golden-layout Goto Github PK

If you delete all components in a Golden Layout and then try to add new ones using GoldenLayoutComponent.createNewComponent(), the first one will work, but the second one will not.

Looks like the first one works because element is set to root as there are zero contentItems.

The second one fails because
element = this.findStack(root.contentItems);
cannot find a stack and sets element to undefined.

Hi!

I'm using ngx-golden-layout in a project that is not using GL's pop-out feature. As such, I don't need synchronization of Angular services between windows. I notice while profiling my app that the service is ticking in the background when the app is idle. Is it possible to configure ngx-golden-layout to disable popouts/turn off the sync service?

Thanks for writing these bindings, they're awesome!

I'm thinking of a service which is initialized by the binding and provides persistent state for instantiated components, so you can request the service for the state.

If you injected the root element in the constructor, wouldn't that avoid the extra ViewChild div and potentially some our styling dimension oddities?

I have understood the code in embedded-enterprises-ng6-golden-layout.js

class GoldenLayoutComponent {
     ............
  ngOnInit() {
     this.glService.getState().then((layout) => {
            this._createLayout(layout);
        });
  }

}

After the layout is created, In glService we are getting the eventHub, But we need to access these in angular components how to export it

Hi,

Using [email protected] with Angular 8.2.2, I want to add an inner layout inside a component which is lay inside a panel of the main layout.

I tried, but it throw an error:

ERROR RangeError: Maximum call stack size exceeded
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:147)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.run (core.js:26169)
at _loop_1 (ngx-golden-layout.js:860)
at ApplicationRef.__tick (ngx-golden-layout.js:868)
at ngx-golden-layout.js:863
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:26255)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.run (core.js:26169)

I don't put any children in the inner layout, just do this:
<golden-layout-root [layout]="layoutConfig"></golden-layout-root>
inside the component's template.

And the code is:
layoutConfig = of({ content: [] });

Any suggestions ?

Hi

I am having some issues when running under a subdomain. Everything seems to work fine under localhost and somehow everything works fine when running incognito window.

ERROR DOMException: Blocked a frame with origin "https://app.visualnovelist.net" from accessing a cross-origin frame.

Seems to be caused by this line:
GoldenlayoutComponent:
anyWin.__apprefs.push(this.appref);

I also changed my apache settings and moved from subdomain to main domain which seemned to work.

Am I doing something wrong?

Thanks

Hi all.
First of all congrats for all your effort in supporting an Angular version for Golden Layout.

I'm wondering if we can have panels like VS. I see that this was addressed in the main project but seems a bit abandoned.

golden-layout/golden-layout#268

Does this library support this? And if so, can you help me with an example?

Thanks.

I am getting this error:

Cannot read property 'has' of undefined.

The error is coming out from ngx-golden-layout.js -> MultiWindowService() function. For some reason rootWindow.__ServiceConstructors is undefined. I did try creating a MultiWindowService and adding it to the module. What is it that I am doing wrong?

Hi,

I am using [email protected] with angular 8.2.2, everything thing is worked well, but when I try to 'Accessing the underlying GoldenLayout API' using the example in the ReadMe I got the error:

Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[AdminLayoutComponent -> function( config, container ) {]:
StaticInjectorError(Platform: core)[AdminLayoutComponent -> function( config, container ) {]:
NullInjectorError: No provider for function( config, container ) {!
NullInjectorError: StaticInjectorError(AppModule)[AdminLayoutComponent -> function( config, container ) {]:
StaticInjectorError(Platform: core)[AdminLayoutComponent -> function( config, container ) {]:
NullInjectorError: No provider for function( config, container )

My app have appModule and sharedModule, In appModule I import like this: GoldenLayoutModule.forRoot(componentTypes)

And in sharedModule like this: GoldenLayoutModule.

I don't know how to solve this! any help will be appriciated :)

Hey,
I use the ngx-golden-layout": "0.0.17 version in Angular 8
The MultiWindowService directive works well when I run the code from the development environment from visual code.
But, when I build a prod and run it in the local container I receive an error from PluginRegistryService

May you help me, please?

When decorating a service with @MultiwindowService, all methods and properties of the service get removed when building with optimization=true. If it set to false, everything works fine. Obviously it's not production ready as the bundle size is huge when optimization = false.

Here is my angular.json build configuration
"optimization": true, "outputHashing": "all", "sourceMap": true, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "20mb", "maximumError": "20mb" } ]
tsconfig.json
"compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es5", "resolveJsonModule": true, "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ],

package.json

`
"@angular/core": "^8.2.14",
"golden-layout": "^1.5.9",
"ngx-golden-layout": "0.0.20",

`

When creating a component using createNewComponent and passing a state, How to get the state back ?

this.goldenLayoutService.createNewComponent( { componentName: 'app-test', component: testComponent }, "App Test!", { id: this.id } );

Hi using the ngx-golden-layout-electron example was able to get basic docking set up for my custom components. But what if your components have input/output, normally configured in the template with [myinput]="data" etc. Where in the configuration can this be set up? Thanks

I have provided certain configuration and I want to decide at the run time whether a component should be rendered or not by looking at value provided in componentState key.

content:[
                  {
                    type: 'component',
                    componentName: 'Test1',
                    title: 'Test1',
                    componentState: { role: 'Admin' }
                  },
                  {
                    type: 'component',
                    componentName: 'app-editor',
                    title: 'Editor',
                    componentState: { role: 'ALL' }
                  }
]

A glimpse of my configuration , I want admin should only open Test1.

Currently I'm trying to initialize my app with a configuration I get from a web service.
The problem is, I cannot get it before my root AppModule initializes because I have to declare the config in the Golden Layout import statement.

I tried to lazy load a feature module, which declares the golden layout there, but I don't seem to get it running.

I get the following error in multiple components which try to access the GoldenLayout class:

ERROR in : Can't resolve all parameters for OptionsComponent in someComponent.ts: ([object Object], ?, [object Object]).

Where ? should be an instance of GoldenLayout.

I'd be very glad if someone got a solution to this.
Thanks in advance.

Hi,

I'm currently using api host with different domain name but we have already set the server header to Access-Control-Allow-Origin: * allowing any request to bypass this issue. We tested it already and its working on all calls.

But it is still erroring out on MultiWindowService function on this particular statement :
const hasInstance = rootWindow.__services.has(uniqueName) when I popped out a window.

What seems to be the problem here?

Thanks,
Allan

A component should be able to prevent closing or destroying of a component. This is necessary for displaying a dialog when unsaved state lives in a component while closing or destroying the container.

This enables the user to cancel an accidental close of a tab.

Hello,

I'm trying to integrate golden layout in a browser application using Angular 8.2 and it seems that my services are created without their injected components.

In the example below, the injected component (httpClient, calendarService and dutyService are all undefined when they are used in the service's functions.

If I remove the @MultiWindowService, everything works as intended however when I pop-out a component, it no longer share the services with the main window (as intended)

This is one of my service:

@Injectable({
  providedIn: 'root'
})
@MultiWindowService<CategoryService>()
export class CategoryService extends BaseService {
  constructor(private httpClient: HttpClient, private calendarService: CalendarService, private dutyService: DutyService) {
    super('/api/dutyCategory');
  }
<Rest of the service>

The layout is defined in one of my components like this:

window['$'] = $;
// Define all component types known at compile time to the golden-layout binding.
// It's possible to modify these at runtime using the `ComponentRegistryService`
const componentTypes: ComponentType[] = [
  {
    name: 'DutyListComponent',
    type: DutyListComponent
  },
  {
    name: 'DutyDetailComponent',
    type: DutyDetailComponent
  },
  {
    name: 'DutyScheduleContactComponent',
    type: DutyScheduleContactComponent
  },
  {
    name: 'CalendarComponent',
    type: CalendarComponent
  }
];
@NgModule({
  entryComponents: [DutyListComponent, DutyDetailComponent, DutyScheduleContactComponent, CalendarComponent],
  declarations: [DutyConsultationComponent],
  imports: [SharedModule, ComponentsModule, DutyConsultationRoutingModule, GoldenLayoutModule.forRoot(componentTypes)],
  providers: [],
  exports: [DutyConsultationComponent]
})
export class DutyConsultationModule {}

There are no errors when I run ng build.

Here are the relevant lines in my package.json:

"@angular/animations": "^8.2.1",
    "@angular/cdk": "^8.2.1",
    "@angular/common": "^8.2.1",
    "@angular/compiler": "^8.2.1",
    "@angular/core": "^8.2.1",
    "@angular/forms": "^8.2.1",
    "@angular/material": "^8.2.1",
    "@angular/platform-browser": "^8.2.1",
    "@angular/platform-browser-dynamic": "^8.2.1",
    "@angular/router": "^8.2.1",
    "golden-layout": "^1.5.9",
    "ngx-golden-layout": "0.0.27",

Can anyone help?

Thanks in advance!

I have created my own GoldenLayout component that I have used for months, but now I am getting a golden layout error that ng6-golden-layout has seemed to fix. Also, this is a great package, so I would like to use it in my project. The problem is I have calls to my GoldenLayout component all over my project, to custom methods I created to work with the GL API the way I needed it. Now If I use ng6-golden-layout I will lose those custom methods. This is due to the way it interact with the underlying API, I see I would reach the api in each component. Is there a way to use the API in a service, that I store my custom methods? So, the methods I have now could still work with ng-golden-layout.

Can we able to add new component into goldenlayout configuration dynamically ?
like ...
var newItemConfig = {
title: title,
type: 'component',
componentName: 'example',
componentState: { text: text }
};
myLayout.selectedItem.addChild( newItemConfig );

` GoldenLayoutComponent.prototype.ngOnInit = function () {
var _this = this;
if (isDevMode())
console.log("Init@" + (this.isChildWindow ? 'child' : 'root') + "!");
var anyWin = (this.topWindow);
if (!this.isChildWindow) {
anyWin.__apprefs = [];
anyWin.__injector = this.injector;
}
anyWin.__apprefs.push(this.appref);
...........
..........

`

because this.isChildWindow is true all the time anyWin.__apprefs is undefined .

Hi All,
if i open many dialogs i have a performance issue due too many change detection.
Why on init in golden layout component of your lib you use this code

....

this.appref.tick = (): void => {
  for (const ar of (this.topWindow as any).__apprefs) {
    ar._zone.run(() => ar.__tick());
  }
};

in this way for a tick in child window is performed tick on other child windows and also in root.
can you explain better ?
thanks

ngOnDestroy is not called on the component when closing a child window.

The expected behavior would be to have ngOnDestroy called when closing a child window.

Hi,

I am using ngx-golden-layout v0.0.32 (latest) with Angular v8.2.0.
I have found a bug in minimise command, maximise working fine but when press minimise button to restore the component to its normal state, the layout will get broken, the minimised component will stay at its current dimensions and the other components will be dropped to new line. (see images)

Normal state, I have 2 components: https://i.ibb.co/7NXq0np/state1.png
Here after I maximise and minimise the first component: https://i.ibb.co/9tkWYm8/state2.png

I downgrade ngx-golden-layout until I found the release in which the bug born, it's v0.0.23.

const INITIAL_LAYOUT = {
  content: [{
    type: 'row',
    content: [{
      type: 'component',
      componentName: 'comp1',
      title: 'component 1',
    }, {
      type: 'component',
      componentName: 'comp2',
      title: 'component 2',
    }]
  }]
};

The state should be able to manage multiple panel instances of one component type.

Hi,

Sorry if this is a wrong place to ask.
Is this package can be used for Angular 7 project?

Thanks
Bromo

Think of a possibility to pass providers scoped to a certain component/subtree around different windows.

Hi,

Using [email protected] with Angular 8.2.2

My component (in-which the g-l component lives) have an 'canDeactivate' guard, to ask the user if he really wants to close the app without save his changes:

const rootRouterConfig: Routes = [
{
  path: 'main',
  component: AdminLayoutComponent,
  canActivate: [AuthGuard],
  canDeactivate: [PendingChangesGuard],
},
....
]

@HostListener('window:beforeunload')
canDeactivate(): Observable<boolean> | boolean {
  return window.confirm('Are you sure you want to exit without save ?');
}

The problem is the g-l component is get destroyed immediately when I close or reload the window; it shows Destroy@root! in the console, whereas it must get destroyed after I confirm the exit.

Any suggestions will be appreciated.

Is there a dynamic way to rearrange tabs without refreshing golden layout or the components? Let say you load new config when you click a button or something.

How can i set name of the tab?

Should
return content[0].instance; // The case when this is the first component.
be
return content.contentItems[0].instance; // The case when this is the first component. ?

Hi,

Can you please add an option to GoldenLayout.Config to support RTL, means the GL content float from right to left.

I tried set dir='rtl' on the parent but it only make the tabs float from right, I want to float the contents also from right to left.

Hi, I am building a detachable/dockable admin panel using Golden Layout. My app requires detaches panel to communicate with the main app, and to achieve that I have been using @MultiWindowService. Everything works just fine in the dev build but undefined is injected for services while using in prod build. Is this a bug?

There a few things left out to the common dev, most errors in console aren't really leading to a correct answer which aren't listed anywhere.

Great contribution, though.
Thanks!

When deprecating a component type, at the moment an exception is thrown when the component type couldn't be found.

With a fallback component we could just instantiate that and tell the user that the component requested isn't available anymore.

When using together with a getDetails() function, we could provide exact information to the user.

It's possible to use glEventHub in Reactjs to manipulate tabs with regard design changes and other events as well, which I could not achieve in angular.

Reactjs Example:

let config={...}
var myLayout = new GoldenLayout( config );
  myLayout.registerComponent( 'Applications', Applications );
myLayout.init();


let event = this.props.glEventHub._layoutManager;
event.root.contentItems[0].contentItems[0].contentItems[1].element.hide(); 
myLayout.updateSize()

//or we can add child to the layout

let newConfig={..}
event.root.contentItems[0].contentItems[0].addChild(newConfig); 

Please let me know how to achieve the same in angular.

Hello,
What is the proper way to capture the ContentItem maximize/minimize events ?

Hey, I'm trying to work my way around GoldenLayout and have hit a bit of a dead-end. I've tried many variations, but for some reason I just cannot seem to be able to replace the child of a component that I've registered after serving the application.

Here's my current code:

import { Component, OnInit, Inject } from '@angular/core';

import * as GoldenLayout from 'golden-layout';
import { GoldenLayoutContainer, GoldenLayoutComponentHost, GoldenLayoutComponent } from 'ngx-golden-layout';

@Component({
  selector: 'app-subscriptions',
  templateUrl: './subscriptions.component.html',
  styleUrls: ['./subscriptions.component.scss']
})
export class SubscriptionsComponent implements OnInit {

  public newConfig: GoldenLayout.ItemConfig = {
    type: 'column',
    content: [{
      type: 'component',
      id: 'Display',
      componentName: 'Display', // The name defined in componentTypes
      title: 'Display',
      isClosable: false
    }]
  };

  constructor(
    public services: Services,
    @Inject(GoldenLayoutComponentHost) private goldenLayout: GoldenLayoutComponent,
    @Inject(GoldenLayoutContainer) private container: GoldenLayout.Container
  ) {
    var GLI = this.goldenLayout.getGoldenLayoutInstance()
    var secCol = GLI.root.getItemsById('second-col')[0]

    GLI.registerComponent('Display', this.newConfig)
    var displayItem = GLI.root.getItemsById('Display')[0]

    secCol.parent.replaceChild(secCol, displayItem)

   }

  ngOnInit() {
  }
}

And unfortunately, this results in the following error:
ERROR Error: "Uncaught (in promise): Error: Please register a constructor function

I'd like to address that I've never really used GoldenLayout before and I'm still a beginner when it comes to Angular 8, so this is likely just my fault for misunderstanding something.

Hi,
Just tried to update my application to Angular 9.
None of my Angular components are created by Golden Layout. Console shows "Resolving component <Component Name>", but constructor for <Component Name> is not called.

Traced it through to goldenLayout.createContentItem(myConfig) and things seemed ok, but then it becomes difficult due to promises (I think).

Should ngx-golden-layout work with Angular 9? If so, any hints as to how I can investigate my problem further?

Thanks, Paul

Can we activate a tab that is already created? As if the user clicked on the tab? I know there is create a tab in GoldenLayoutService but I don't see a way to activate an already created tab.

like

this.goldenLayoutService.setActive(item)

A component should be able to access the Container instance to which it is bound.

This will enable the component to set the title of the tab pane.

Alternatively only expose an API to the component to set the title.

ERROR in src/app/app.module.ts(9,8): error TS2307: Cannot find module '@embedded-enterprises/ng6-golden-layout'.

Hi,

I am using [email protected] with Angular 8.2.2, using the stateChanged event always returns an undefined value.

<golden-layout-root [layout]="layoutConfig" (stateChanged)="layoutChanged($event)"></golden-layout-root>

In component:

INITIAL_LAYOUT: GoldenLayout.Config = {...};
layoutConfig = of(this.INITIAL_LAYOUT);

layoutChanged(evt: any) {
  console.error('Layout changed', evt);
}

glConfig.txt

when i try to initialize the layout with above configuration with popOutConfig i'm getting an error

ERROR TypeError: rec.push is not iterable (cannot read property Symbol(Symbol.iterator))
at push../node_modules/golden-layout/dist/goldenlayout.js.lm.LayoutManager.goldenLayout.createPopout (ngx-golden-layout.js:1053)
at push../node_modules/golden-layout/dist/goldenlayout.js.lm.LayoutManager._createSubWindows (goldenlayout.js:1317)
at push../node_modules/golden-layout/dist/goldenlayout.js.lm.LayoutManager.init (goldenlayout.js:674)
at GoldenLayoutComponent.initializeGoldenLayout (ngx-golden-layout.js:1095)
at SafeSubscriber._next (ngx-golden-layout.js:851)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
at BehaviorSubject._subscribe (BehaviorSubject.js:14)

Actually i found the issue, In the above image we are trying to push the itemToProcess.contentItems into rec.

[
{
"title":"<em class="fa fa-file"> Documents",
"type":"component",
"componentName":"app-test",
"component":"document",
"isClosable":false,
"componentState":{
"color":"#bcc8dc"
},
"reorderEnabled":true
}
]

But the itemToProcess doesn't have contentItems.

when i tried removing the above selected code. its working fine.

I just need to know that these are correct or it will cause any other errors.

Hi,

Having a layout like this:

{
  content: [{
    type: 'row',
    content: [{
      type: 'column',
      id: 'first-col',
      content: [{
        type: 'component',
        componentName: 'first-component'
      }, {
        type: 'column',
        id: 'sec-col',
        content: [{
          type: 'component',
          componentName: 'second-component'
        }]
      }]
    }]
  }]
}

When I want (for example) to add a new component to second column (bellow the second component), I use:

const secCol = this.goldenLayout.getGoldenLayoutInstance().root.getItemsById('sec-col');
secCol[0].addChild({...});

The above code is always working for first time, in second time, if I close one of the components in sec-col, and tried the above code, sec-col will not be found.
It will be deleted from the layout and it's content will be added to its parent content-item (as I found in the investigation).

ngx-golden-layout : 0.0.22;
golden-layout : 1.5.9

If I popped out a window and I want to pop it in, any existing way or feature here to do that? By the way I using the older version of ng6-golden-layout and I did not find it there just checking if that feature already exist on this version. I planning to upgrade anyways. Thanks.

Documentation issue only.
In web page https://github.com/EmbeddedEnterprises/ng6-golden-layout it mentions:
Observable<GoldenLayout.Config>

If strictTemplates are used in Angular 9, this needs to be:
Observable<IExtendedGoldenLayoutConfig>

I want to access the Angular component instances which GoldenLayout creates for me.

I have a parent component with a GL root element. I initialize the layout empty and create a component dynamically:

this.cmp.createNewComponent({
    componentName: 'myComponent',
    type: 'component',
    componentState: { ... }
})

The created component offers events to which I want to subscribe.
I thought that there must be some way of getting a ComponentRef, the objects which ComponentFactorys create, so that I can call:

referencoToAngularComponent.instance.outputEvent.subscribe(myFunction);

How do we access the references to Angular components?

Angular version: 8

Thanks in advance for any help and also for this angular integration. The work is much appreciated.

I try to use the ng6-golden-layout for a specific route in angular. I have the tag inside the template of the component of the route which i am opening.
When opening that route I get the following error:

Init@root! embedded-enterprises-ng6-golden-layout.js:184
Create@root! embedded-enterprises-ng6-golden-layout.js:189
Init@root! embedded-enterprises-ng6-golden-layout.js:184
Create@root! embedded-enterprises-ng6-golden-layout.js:184
Create@root! core.js:15714 ERROR RangeError: Maximum call stack size exceeded
at embedded-enterprises-ng6-golden-layout.js:199

Can't seem to find the error. I'm trying this because I want to use the golden-layout only for a specific route. I hope someone can help me at this.