New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular 2.0 support #75

Open
natcohen opened this Issue Nov 12, 2015 · 53 comments

Comments

Projects
None yet
@natcohen

natcohen commented Nov 12, 2015

Any plan to support angular 2.0 and add a tuto?

Thanks

@WolframHempel

This comment has been minimized.

Show comment
Hide comment
@WolframHempel

WolframHempel Dec 18, 2015

Collaborator

Hi @natcohen,

yup. we're working on a tutorial. As far as integration goes, it should just work without additional support, but we haven't tested all age cases yet. I'll update this issue as soon as a tutorial becomes available

Collaborator

WolframHempel commented Dec 18, 2015

Hi @natcohen,

yup. we're working on a tutorial. As far as integration goes, it should just work without additional support, but we haven't tested all age cases yet. I'll update this issue as soon as a tutorial becomes available

@natcohen

This comment has been minimized.

Show comment
Hide comment
@natcohen

natcohen Jan 27, 2016

Hi @WolframHempel,

Angular 2.0 is in beta and I just wanted to know if you have a temporary tuto so we can test at least minimal things. I'm just stuck with manual bootstrap when GoldenLayout initialized...

Thanks!

natcohen commented Jan 27, 2016

Hi @WolframHempel,

Angular 2.0 is in beta and I just wanted to know if you have a temporary tuto so we can test at least minimal things. I'm just stuck with manual bootstrap when GoldenLayout initialized...

Thanks!

@realsaraf

This comment has been minimized.

Show comment
Hide comment
@realsaraf

realsaraf Mar 3, 2016

Same here. Can you you please share the tutorial with us? we cannot decide to buy until get the tutorial and test it.

realsaraf commented Mar 3, 2016

Same here. Can you you please share the tutorial with us? we cannot decide to buy until get the tutorial and test it.

@realsaraf

This comment has been minimized.

Show comment
Hide comment
@realsaraf

realsaraf Mar 21, 2016

any update on this?

realsaraf commented Mar 21, 2016

any update on this?

@WolframHempel

This comment has been minimized.

Show comment
Hide comment
@WolframHempel

WolframHempel Mar 30, 2016

Collaborator

I've looked into it and I have to admit that I'm struggling. Angular 1 had a strong bias towards taking over the entire page, but individual modules could be boostrapped into individual containers. Whilst Angular 2 in theory has a more component based approach, it's bootstrap function now only takes a component which in turn contains a DOM selector of where it wants to be bootstrapped into - which means their now is now way to orchestrate multiple independent pieces of Angular across windows as GoldenLayout would require.

There might be a solution using DynamicComponentLoader, but I'm not too much of an Angular expert and not sure if its a good fit.

When releasing GoldenLayout 1.5 (upcoming version with MIT license and build in React support) I'll add a help-wanted label to Angular, I know there are some people around that are incredibly knowledgeable about its internals and might be able to help

Collaborator

WolframHempel commented Mar 30, 2016

I've looked into it and I have to admit that I'm struggling. Angular 1 had a strong bias towards taking over the entire page, but individual modules could be boostrapped into individual containers. Whilst Angular 2 in theory has a more component based approach, it's bootstrap function now only takes a component which in turn contains a DOM selector of where it wants to be bootstrapped into - which means their now is now way to orchestrate multiple independent pieces of Angular across windows as GoldenLayout would require.

There might be a solution using DynamicComponentLoader, but I'm not too much of an Angular expert and not sure if its a good fit.

When releasing GoldenLayout 1.5 (upcoming version with MIT license and build in React support) I'll add a help-wanted label to Angular, I know there are some people around that are incredibly knowledgeable about its internals and might be able to help

@david-ergoss

This comment has been minimized.

Show comment
Hide comment
@david-ergoss

david-ergoss Apr 11, 2016

I manage to make it work, maybe this can help:
http://plnkr.co/edit/tUQOev?p=preview

david-ergoss commented Apr 11, 2016

I manage to make it work, maybe this can help:
http://plnkr.co/edit/tUQOev?p=preview

@natcohen

This comment has been minimized.

Show comment
Hide comment
@natcohen

natcohen May 17, 2016

@WolframHempel I think david-ergoss solution seems to work... any plan to add it to your tutorials?

natcohen commented May 17, 2016

@WolframHempel I think david-ergoss solution seems to work... any plan to add it to your tutorials?

@natcohen

This comment has been minimized.

Show comment
Hide comment
@natcohen

natcohen May 26, 2016

@david-ergoss The example you posted doesn't work with the new Angular 2 RC, do you know how to change your code to make it work?

Edit: It seems that the internalElement has disappeared... I've tried to play with it but couldn't find a solution. Would be awesome if you could have a look!

natcohen commented May 26, 2016

@david-ergoss The example you posted doesn't work with the new Angular 2 RC, do you know how to change your code to make it work?

Edit: It seems that the internalElement has disappeared... I've tried to play with it but couldn't find a solution. Would be awesome if you could have a look!

@david-ergoss

This comment has been minimized.

Show comment
Hide comment
@david-ergoss

david-ergoss Jun 6, 2016

@natcohen You can just delete the line
compRef.location["internalElement"].parentView.changeDetector.ref.detectChanges();
and it should work with the RC.

david-ergoss commented Jun 6, 2016

@natcohen You can just delete the line
compRef.location["internalElement"].parentView.changeDetector.ref.detectChanges();
and it should work with the RC.

@dgorobopec

This comment has been minimized.

Show comment
Hide comment
@dgorobopec

dgorobopec Jun 22, 2016

@david-ergoss It seems that it does not work with the last rc release as the this.applicationRef._loadComponent and this.applicationRef._unloadComponent do not exist anymore.

dgorobopec commented Jun 22, 2016

@david-ergoss It seems that it does not work with the last rc release as the this.applicationRef._loadComponent and this.applicationRef._unloadComponent do not exist anymore.

@cosminpopescu

This comment has been minimized.

Show comment
Hide comment
@cosminpopescu

cosminpopescu Jul 20, 2016

When run in Electron, the pop-in doesn't work. Any idea why?
BTW, thanks for this, it works great.

cosminpopescu commented Jul 20, 2016

When run in Electron, the pop-in doesn't work. Any idea why?
BTW, thanks for this, it works great.

@natcohen

This comment has been minimized.

Show comment
Hide comment
@natcohen

natcohen Aug 10, 2016

@david-ergoss having troubles with the last RC5... any idea?

natcohen commented Aug 10, 2016

@david-ergoss having troubles with the last RC5... any idea?

@dgorobopec

This comment has been minimized.

Show comment
Hide comment
@dgorobopec

dgorobopec Aug 10, 2016

@natcohen What are your troubles ?

dgorobopec commented Aug 10, 2016

@natcohen What are your troubles ?

@natcohen

This comment has been minimized.

Show comment
Hide comment
@natcohen

natcohen Aug 10, 2016

Inside my golden directive (provided by @david-ergoss ), ngOnInit is called infinite times (I've added a console.log inside and it keeps calling it until it crashes). Note that I've added the implements OnInit to my golden class (same bug with or without the implements)

natcohen commented Aug 10, 2016

Inside my golden directive (provided by @david-ergoss ), ngOnInit is called infinite times (I've added a console.log inside and it keeps calling it until it crashes). Note that I've added the implements OnInit to my golden class (same bug with or without the implements)

@natcohen

This comment has been minimized.

Show comment
Hide comment
@natcohen

natcohen Aug 10, 2016

In fact, the directive is called once before I get the Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. message and then keeps calling until it crashes...

If I comment out this.myLayout.init();, the directive is only called once but golden layout is obviously not working...

natcohen commented Aug 10, 2016

In fact, the directive is called once before I get the Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. message and then keeps calling until it crashes...

If I comment out this.myLayout.init();, the directive is only called once but golden layout is obviously not working...

@natcohen

This comment has been minimized.

Show comment
Hide comment
@natcohen

natcohen Aug 11, 2016

Still stuck with this new version... I'm not exactly sure where to put the golden directive and where to put it in my html. A code sample (plunker) would be greatly appreciated!

natcohen commented Aug 11, 2016

Still stuck with this new version... I'm not exactly sure where to put the golden directive and where to put it in my html. A code sample (plunker) would be greatly appreciated!

@natcohen

This comment has been minimized.

Show comment
Hide comment
@natcohen

natcohen Aug 19, 2016

@dgorobopec and @david-ergoss Can one of you share an example with RC5 and its module interface?

natcohen commented Aug 19, 2016

@dgorobopec and @david-ergoss Can one of you share an example with RC5 and its module interface?

@david-ergoss

This comment has been minimized.

Show comment
Hide comment
@david-ergoss

david-ergoss Aug 26, 2016

I have update my app which use Golden Layout to RC5 and everything works as expected. The only difference between the plunker and my implementation is that I have created a component rather than a directive.

david-ergoss commented Aug 26, 2016

I have update my app which use Golden Layout to RC5 and everything works as expected. The only difference between the plunker and my implementation is that I have created a component rather than a directive.

@djb12

This comment has been minimized.

Show comment
Hide comment
@djb12

djb12 Aug 31, 2016

Initial answer:
@david-ergoss: I have issues porting your solution to RC 5 as well. An updated Plunk would be very appreciated. It would be amazing having the possibility to use golden layout with the latest angular version.

Update:
@dgorobopec and @natcohen: I cached my ApplicationRef in an variable of type any. Then you can call the _loadComponent method and it works like a charm.

const appRef: any = self.applicationRef; and
appRef._loadComponent(compRef);

djb12 commented Aug 31, 2016

Initial answer:
@david-ergoss: I have issues porting your solution to RC 5 as well. An updated Plunk would be very appreciated. It would be amazing having the possibility to use golden layout with the latest angular version.

Update:
@dgorobopec and @natcohen: I cached my ApplicationRef in an variable of type any. Then you can call the _loadComponent method and it works like a charm.

const appRef: any = self.applicationRef; and
appRef._loadComponent(compRef);

@david-ergoss

This comment has been minimized.

Show comment
Hide comment
@david-ergoss

david-ergoss Sep 2, 2016

I have created a new plunk with a version compatible with RC6:
http://plnkr.co/edit/aC29NN

david-ergoss commented Sep 2, 2016

I have created a new plunk with a version compatible with RC6:
http://plnkr.co/edit/aC29NN

@natcohen

This comment has been minimized.

Show comment
Hide comment
@natcohen

natcohen Sep 5, 2016

@david-ergoss Thanks David! I have one last question... how do you 'share' the layout with the other components so you can use eventHub.

I've tried this: http://plnkr.co/edit/Pz7V9ZH0JqCKXzD4lkqq?p=preview but it doesn't seem to accept the component as a directive (probably because it creates a loop? AppComponent inside GL and GL inside AppComponent)

natcohen commented Sep 5, 2016

@david-ergoss Thanks David! I have one last question... how do you 'share' the layout with the other components so you can use eventHub.

I've tried this: http://plnkr.co/edit/Pz7V9ZH0JqCKXzD4lkqq?p=preview but it doesn't seem to accept the component as a directive (probably because it creates a loop? AppComponent inside GL and GL inside AppComponent)

@david-ergoss

This comment has been minimized.

Show comment
Hide comment
@david-ergoss

david-ergoss Sep 5, 2016

@natcohen You can pass the eventHub ref to the component like that:
http://plnkr.co/edit/QEATW0?p=preview

david-ergoss commented Sep 5, 2016

@natcohen You can pass the eventHub ref to the component like that:
http://plnkr.co/edit/QEATW0?p=preview

@natcohen

This comment has been minimized.

Show comment
Hide comment
@natcohen

natcohen Sep 5, 2016

@david-ergoss Very smart, thanks!

natcohen commented Sep 5, 2016

@david-ergoss Very smart, thanks!

@natcohen

This comment has been minimized.

Show comment
Hide comment
@natcohen

natcohen Sep 5, 2016

@david-ergoss the solution you provided for RC6 doesn't update the size of golden layout when the size of the browser changes

natcohen commented Sep 5, 2016

@david-ergoss the solution you provided for RC6 doesn't update the size of golden layout when the size of the browser changes

@natcohen

This comment has been minimized.

Show comment
Hide comment
@natcohen

natcohen Sep 20, 2016

@david-ergoss Any advice to solve the resize issue?

natcohen commented Sep 20, 2016

@david-ergoss Any advice to solve the resize issue?

@FunkeyFlo

This comment has been minimized.

Show comment
Hide comment
@FunkeyFlo

FunkeyFlo Oct 3, 2016

@natcohen If you're still looking for a solution to the resizing issue I just made a plunk that demonstrates how to do it. Thanks @david-ergoss for the initial examples.
http://plnkr.co/edit/m3114Uvsa6eODjEPpLme?p=info

I'll write a blog post explaining the usage with Angular 2 in some more detail as well, if you guys are interested I could post the link here.

FunkeyFlo commented Oct 3, 2016

@natcohen If you're still looking for a solution to the resizing issue I just made a plunk that demonstrates how to do it. Thanks @david-ergoss for the initial examples.
http://plnkr.co/edit/m3114Uvsa6eODjEPpLme?p=info

I'll write a blog post explaining the usage with Angular 2 in some more detail as well, if you guys are interested I could post the link here.

@marclerman

This comment has been minimized.

Show comment
Hide comment
@marclerman

marclerman Oct 10, 2016

@FunkeyFlo This is great. Now, the panes are empty, and I was trying to add Angular 2 components to them by adding into your Plunker the same kind of dynamic component injection into a div as what @david-ergoss did in his original Plunker. However things changed so much with Angular 2 final that I could not get this to work.

I would think we would have to use Compiler.compilerModuleAndAllComponentsAsync, but then to be able to create a component, you need a ViewContainerRef, and I absolutely do not see how one could get hold of one (or create one) when dealing with a dynamically-added HTML element, such as the

in that original Plunker (the one with the "id='component'...").

Would anyone have an idea on how to get closer to a full solution?

marclerman commented Oct 10, 2016

@FunkeyFlo This is great. Now, the panes are empty, and I was trying to add Angular 2 components to them by adding into your Plunker the same kind of dynamic component injection into a div as what @david-ergoss did in his original Plunker. However things changed so much with Angular 2 final that I could not get this to work.

I would think we would have to use Compiler.compilerModuleAndAllComponentsAsync, but then to be able to create a component, you need a ViewContainerRef, and I absolutely do not see how one could get hold of one (or create one) when dealing with a dynamically-added HTML element, such as the

in that original Plunker (the one with the "id='component'...").

Would anyone have an idea on how to get closer to a full solution?

@david-ergoss

This comment has been minimized.

Show comment
Hide comment
@david-ergoss

david-ergoss Oct 10, 2016

I have updated my second plunk so it works with angular 2.0.2 and included the listener event for the size.
Notice that you have to declare all registered components in the entryComponents array for the factory to work.

david-ergoss commented Oct 10, 2016

I have updated my second plunk so it works with angular 2.0.2 and included the listener event for the size.
Notice that you have to declare all registered components in the entryComponents array for the factory to work.

@marclerman

This comment has been minimized.

Show comment
Hide comment
@marclerman

marclerman Oct 11, 2016

@david-ergoss Thank you very much!
What is missing in that Plunk is that change detection does not occur initially (you can test that by adding inputs bound to some property), and that ngOnDestroy is not called when a tab is closed.

So I took one of your earlier Plunks, and added some of the things you had in there to your new example:

  • When registering the component, after it's been added to its container, I call compRef.changeDetectorRef.detectChanges() to have an initial change detection phase, and then set the reference to the new component onto the Golden-layout container: container["compRef"] = compRef.
  • I also added the following to destroy the component (now that the container holds onto its ref):
    this.layout.on("itemDestroyed", item => { if (item.container != null) { let compRef = item.container["compRef"]; if (compRef != null) { compRef.destroy(); } } });

And with that, it seems to work quite nicely. Now I do not know if there is a better way to make sure that the initial change detection is performed, other than calling detectChanges() directly. But this is looking pretty good.

marclerman commented Oct 11, 2016

@david-ergoss Thank you very much!
What is missing in that Plunk is that change detection does not occur initially (you can test that by adding inputs bound to some property), and that ngOnDestroy is not called when a tab is closed.

So I took one of your earlier Plunks, and added some of the things you had in there to your new example:

  • When registering the component, after it's been added to its container, I call compRef.changeDetectorRef.detectChanges() to have an initial change detection phase, and then set the reference to the new component onto the Golden-layout container: container["compRef"] = compRef.
  • I also added the following to destroy the component (now that the container holds onto its ref):
    this.layout.on("itemDestroyed", item => { if (item.container != null) { let compRef = item.container["compRef"]; if (compRef != null) { compRef.destroy(); } } });

And with that, it seems to work quite nicely. Now I do not know if there is a better way to make sure that the initial change detection is performed, other than calling detectChanges() directly. But this is looking pretty good.

@FunkeyFlo

This comment has been minimized.

Show comment
Hide comment
@FunkeyFlo

FunkeyFlo Oct 11, 2016

Hi Guys,

I've recently switched from System.js to WebPack since the angular team announced the move to WebPack themselves. Since then my data bindings aren't executed on load of the dynamically added components.
The strangest thing is: they are executed on a window resize, not just a panel, but the entire browser window.

Has anyone else run into this, and perhaps found a (temporary) fix?

EDIT: I found the fix to be to not use the Angular webpack setuptutorial but instead use the starter template by angular class. A lot of dependencies going on, so it's hard to pinpoint what caused the issue.

FunkeyFlo commented Oct 11, 2016

Hi Guys,

I've recently switched from System.js to WebPack since the angular team announced the move to WebPack themselves. Since then my data bindings aren't executed on load of the dynamically added components.
The strangest thing is: they are executed on a window resize, not just a panel, but the entire browser window.

Has anyone else run into this, and perhaps found a (temporary) fix?

EDIT: I found the fix to be to not use the Angular webpack setuptutorial but instead use the starter template by angular class. A lot of dependencies going on, so it's hard to pinpoint what caused the issue.

@crumhorn

This comment has been minimized.

Show comment
Hide comment
@crumhorn

crumhorn Oct 11, 2016

@marclerman Any chance you could modify the latest Plunkr posted here with those changes you added? Just so that there's a complete one for Angular 2.

crumhorn commented Oct 11, 2016

@marclerman Any chance you could modify the latest Plunkr posted here with those changes you added? Just so that there's a complete one for Angular 2.

@marclerman

This comment has been minimized.

Show comment
Hide comment

marclerman commented Oct 13, 2016

Here it is: http://plnkr.co/edit/jcIOsr?p=preview.

@mrsoto

This comment has been minimized.

Show comment
Hide comment
@mrsoto

mrsoto Nov 11, 2016

@marclerman Thanks for your Plunkr, nice job.

This approach invert the control and move the widgets creation responsibility from GoldenLayout to a Angular 2 component, this invalidate save / restore workspace functionality, as far as I understand.

As @WolframHempel says GoldenLayout can't bootstrap Angular modules as easy as in Angular 1 was. I guess and will work on it that multiple Angular 2 applications may be bootstrapped and coordinated using rxJS and a webworker. Actually I'm looking for multiple layouts one in it's own window synchronized. This may be done using a common webworker.

See also: https://blog.sstorie.com/bootstrapping-multiple-angular-2-applications-on-the-same-page/

mrsoto commented Nov 11, 2016

@marclerman Thanks for your Plunkr, nice job.

This approach invert the control and move the widgets creation responsibility from GoldenLayout to a Angular 2 component, this invalidate save / restore workspace functionality, as far as I understand.

As @WolframHempel says GoldenLayout can't bootstrap Angular modules as easy as in Angular 1 was. I guess and will work on it that multiple Angular 2 applications may be bootstrapped and coordinated using rxJS and a webworker. Actually I'm looking for multiple layouts one in it's own window synchronized. This may be done using a common webworker.

See also: https://blog.sstorie.com/bootstrapping-multiple-angular-2-applications-on-the-same-page/

@crumhorn

This comment has been minimized.

Show comment
Hide comment
@crumhorn

crumhorn Nov 21, 2016

Has anyone gotten it to work with Angular2 version 2.2.1?

(I upgraded from 2.1.1 to 2.2.1), I now suddenly get this on the layout.init() call;

core.umd.js:2837 EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: ComponentConstructor is not a constructor
TypeError: ComponentConstructor is not a constructor
    at lm.items.Component [as contructor] (http://localhost:3000/golden-layout/dist/goldenlayout.js:3367:18)
    at lm.LayoutManager.createContentItem (http://localhost:3000/golden-layout/dist/goldenlayout.js:818:17)
    at lm.items.Stack._createContentItems (http://localhost:3000/golden-layout/dist/goldenlayout.js:3260:38)
    at new lm.items.AbstractContentItem (http://localhost:3000/golden-layout/dist/goldenlayout.js:2765:8)
    at lm.items.Stack [as contructor] (http://localhost:3000/golden-layout/dist/goldenlayout.js:3906:31)
    at lm.LayoutManager.createContentItem (http://localhost:3000/golden-layout/dist/goldenlayout.js:818:17)
    at lm.items.RowOrColumn._createContentItems (http://localhost:3000/golden-layout/dist/goldenlayout.js:3260:38)
    at new lm.items.AbstractContentItem (http://localhost:3000/golden-layout/dist/goldenlayout.js:2765:8)
    at lm.items.RowOrColumn [as contructor] (http://localhost:3000/golden-layout/dist/goldenlayout.js:3475:31)
    at lm.LayoutManager.createContentItem (http://localhost:3000/golden-layout/dist/goldenlayout.js:818:17)

crumhorn commented Nov 21, 2016

Has anyone gotten it to work with Angular2 version 2.2.1?

(I upgraded from 2.1.1 to 2.2.1), I now suddenly get this on the layout.init() call;

core.umd.js:2837 EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: ComponentConstructor is not a constructor
TypeError: ComponentConstructor is not a constructor
    at lm.items.Component [as contructor] (http://localhost:3000/golden-layout/dist/goldenlayout.js:3367:18)
    at lm.LayoutManager.createContentItem (http://localhost:3000/golden-layout/dist/goldenlayout.js:818:17)
    at lm.items.Stack._createContentItems (http://localhost:3000/golden-layout/dist/goldenlayout.js:3260:38)
    at new lm.items.AbstractContentItem (http://localhost:3000/golden-layout/dist/goldenlayout.js:2765:8)
    at lm.items.Stack [as contructor] (http://localhost:3000/golden-layout/dist/goldenlayout.js:3906:31)
    at lm.LayoutManager.createContentItem (http://localhost:3000/golden-layout/dist/goldenlayout.js:818:17)
    at lm.items.RowOrColumn._createContentItems (http://localhost:3000/golden-layout/dist/goldenlayout.js:3260:38)
    at new lm.items.AbstractContentItem (http://localhost:3000/golden-layout/dist/goldenlayout.js:2765:8)
    at lm.items.RowOrColumn [as contructor] (http://localhost:3000/golden-layout/dist/goldenlayout.js:3475:31)
    at lm.LayoutManager.createContentItem (http://localhost:3000/golden-layout/dist/goldenlayout.js:818:17)
@mrsoto

This comment has been minimized.

Show comment
Hide comment
@mrsoto

mrsoto commented Nov 28, 2016

@a497988

This comment has been minimized.

Show comment
Hide comment
@a497988

a497988 Jan 19, 2017

I know that @david-ergoss has a plunker of this working with angular 2. @WolframHempel I was wondering if you planned to try and incorporate this at all in golden layouts code, so that it is available from the website?

a497988 commented Jan 19, 2017

I know that @david-ergoss has a plunker of this working with angular 2. @WolframHempel I was wondering if you planned to try and incorporate this at all in golden layouts code, so that it is available from the website?

@ButchMonkey ButchMonkey added the Angular label Jan 24, 2017

@jmls

This comment has been minimized.

Show comment
Hide comment
@jmls

jmls Jan 27, 2017

Been playing around with this, and was wanting to dynamically add components to each section rather than defining them in code - does anyone know if that would be possible ?

jmls commented Jan 27, 2017

Been playing around with this, and was wanting to dynamically add components to each section rather than defining them in code - does anyone know if that would be possible ?

@Borquaye

This comment has been minimized.

Show comment
Hide comment
@Borquaye

Borquaye Mar 21, 2017

Hey guys, I made a fork of @marclerman 's plunk to remove the dependency on JQuery to select elements, Angular has ways of doing this and it would cause problems in an application that uses protractor as that globally defines '$'

I Imported ViewChild from @angular/core and used it to set a private property layout with an HTML element with that tag (this doesn't work with the id attribute but rather the hash notation i.e #layout). You can then get the nativeElement of that ElementRef and you're good to go.

http://plnkr.co/edit/FITTtt?p=preview

Borquaye commented Mar 21, 2017

Hey guys, I made a fork of @marclerman 's plunk to remove the dependency on JQuery to select elements, Angular has ways of doing this and it would cause problems in an application that uses protractor as that globally defines '$'

I Imported ViewChild from @angular/core and used it to set a private property layout with an HTML element with that tag (this doesn't work with the id attribute but rather the hash notation i.e #layout). You can then get the nativeElement of that ElementRef and you're good to go.

http://plnkr.co/edit/FITTtt?p=preview

@Abrissirba

This comment has been minimized.

Show comment
Hide comment
@Abrissirba

Abrissirba Mar 23, 2017

I had problems with change detection not being run after the first creation. For example if updated a propertythat was bound to the template on a button click , it wouldn't update immediately. The update happened at a later point, e.g. on a click event somewhere on else the screen or a window resize.

I'm not sure if I'm right but my gut feeling told me that it had something to to with the creation of the component that would put it outside the component tree. After googling a bit I tried to put the component creation in a zone.run() and voila, now change detection seems to be working fine. Here is an updated plunker.

http://plnkr.co/edit/MLVeVvGOshFncZ7SZ92w?p=preview

Abrissirba commented Mar 23, 2017

I had problems with change detection not being run after the first creation. For example if updated a propertythat was bound to the template on a button click , it wouldn't update immediately. The update happened at a later point, e.g. on a click event somewhere on else the screen or a window resize.

I'm not sure if I'm right but my gut feeling told me that it had something to to with the creation of the component that would put it outside the component tree. After googling a bit I tried to put the component creation in a zone.run() and voila, now change detection seems to be working fine. Here is an updated plunker.

http://plnkr.co/edit/MLVeVvGOshFncZ7SZ92w?p=preview

@prashantprabhakar

This comment has been minimized.

Show comment
Hide comment
@prashantprabhakar

prashantprabhakar May 15, 2017

@Borquaye I was trying to use your plunker, but got following erro:

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (18,11): Duplicate identifier 'layout'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (54,17): Property 'registerComponent' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (58,52): Property 'eventHub' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (67,17): Property 'registerComponent' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (71,52): Property 'eventHub' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (80,17): Property 'init' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (82,15): Property 'on' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (95,21): Property 'updateSize' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (100,19): Property 'eventHub' does not exist on type 'ElementRef'.
Why is that? Any help on that?

prashantprabhakar commented May 15, 2017

@Borquaye I was trying to use your plunker, but got following erro:

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (18,11): Duplicate identifier 'layout'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (54,17): Property 'registerComponent' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (58,52): Property 'eventHub' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (67,17): Property 'registerComponent' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (71,52): Property 'eventHub' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (80,17): Property 'init' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (82,15): Property 'on' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (95,21): Property 'updateSize' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (100,19): Property 'eventHub' does not exist on type 'ElementRef'.
Why is that? Any help on that?

@Borquaye

This comment has been minimized.

Show comment
Hide comment
@Borquaye

Borquaye May 15, 2017

hey @prashantprabhakar It seems when adding the ViewChild and declaring layout as an ElementRef on line 16 I forgot to remove the layout declaration on line 18 "private layout: any;"
You can remove that line and see if that solves the issue for you.

I've updated the plunk, thanks for pointing that out :) that should solve the first error but i'm not sure why you are getting the rest, it may be an issue with the project setup on your computer, what version of Angular are you using?

http://plnkr.co/edit/FITTtt?p=preview

Borquaye commented May 15, 2017

hey @prashantprabhakar It seems when adding the ViewChild and declaring layout as an ElementRef on line 16 I forgot to remove the layout declaration on line 18 "private layout: any;"
You can remove that line and see if that solves the issue for you.

I've updated the plunk, thanks for pointing that out :) that should solve the first error but i'm not sure why you are getting the rest, it may be an issue with the project setup on your computer, what version of Angular are you using?

http://plnkr.co/edit/FITTtt?p=preview

@prashantprabhakar

This comment has been minimized.

Show comment
Hide comment
@prashantprabhakar

prashantprabhakar May 15, 2017

@Borquaye I have removed that line. Got rid of first error:

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (18,11): Duplicate identifier 'layout'.

But still have remaining errors:

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (54,17): Property 'registerComponent' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (58,52): Property 'eventHub' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (67,17): Property 'registerComponent' does not exist on type 'ElementRef'. .....

Why is that regsterComponent doesn't exist on EleemntRef?

prashantprabhakar commented May 15, 2017

@Borquaye I have removed that line. Got rid of first error:

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (18,11): Duplicate identifier 'layout'.

But still have remaining errors:

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (54,17): Property 'registerComponent' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (58,52): Property 'eventHub' does not exist on type 'ElementRef'.

ERROR in /home/prsingh/prashant/Gemini/Angular2/Bcode/golden-es6/my-app/src/app/gl.component.ts (67,17): Property 'registerComponent' does not exist on type 'ElementRef'. .....

Why is that regsterComponent doesn't exist on EleemntRef?

@prashantprabhakar

This comment has been minimized.

Show comment
Hide comment
@prashantprabhakar

prashantprabhakar May 15, 2017

Hi, found the solution, you need to use:
this.layout.nativeElement.registerComponent instead of this.layout.registerComponent.
Same if for eventHub, init, on, updateSize.

prashantprabhakar commented May 15, 2017

Hi, found the solution, you need to use:
this.layout.nativeElement.registerComponent instead of this.layout.registerComponent.
Same if for eventHub, init, on, updateSize.

@Borquaye

This comment has been minimized.

Show comment
Hide comment
@Borquaye

Borquaye commented May 15, 2017

Just putting this here for others to see incase they come across a similar issue

http://stackoverflow.com/questions/43972816/property-registercomponent-does-not-exist-on-type-elementref/43982482#43982482

@megamindbrian

This comment has been minimized.

Show comment
Hide comment
@megamindbrian

megamindbrian Jul 13, 2017

@Borquaye Why does it feel like the popout is re-loading angular in a separate window?

I just had an idea. How about using webpack and angular/universal to build apps from inside the browser?

megamindbrian commented Jul 13, 2017

@Borquaye Why does it feel like the popout is re-loading angular in a separate window?

I just had an idea. How about using webpack and angular/universal to build apps from inside the browser?

@ckosmowski

This comment has been minimized.

Show comment
Hide comment
@ckosmowski

ckosmowski Aug 1, 2017

Hi there. I tested all the plunkrs found here to make golden-layout work with Angular. But even with the most recent ones of @Abrissirba @Borquaye i still have the problem that, if i popout one of the components and then send the vent through the hub, the display in the popped-out component is not updated until i resize the window or do anything else. So the components do not seem to be updated live.

Am i doing anything wrong with the plunkrs here ? Are they working for you ?

ckosmowski commented Aug 1, 2017

Hi there. I tested all the plunkrs found here to make golden-layout work with Angular. But even with the most recent ones of @Abrissirba @Borquaye i still have the problem that, if i popout one of the components and then send the vent through the hub, the display in the popped-out component is not updated until i resize the window or do anything else. So the components do not seem to be updated live.

Am i doing anything wrong with the plunkrs here ? Are they working for you ?

@ButchMonkey

This comment has been minimized.

Show comment
Hide comment
@ButchMonkey

ButchMonkey Aug 1, 2017

Collaborator

Found a couple links that might be useful to some
https://github.com/goldsam/ng-golden-layout
https://www.npmjs.com/package/ng-golden-layout

Forgive me if they have already been posted.

Collaborator

ButchMonkey commented Aug 1, 2017

Found a couple links that might be useful to some
https://github.com/goldsam/ng-golden-layout
https://www.npmjs.com/package/ng-golden-layout

Forgive me if they have already been posted.

@megamindbrian

This comment has been minimized.

Show comment
Hide comment
@megamindbrian

megamindbrian Aug 1, 2017

megamindbrian commented Aug 1, 2017

@timilsinagd

This comment has been minimized.

Show comment
Hide comment
@timilsinagd

timilsinagd Sep 15, 2017

It will be greatly appreciated if some one had a solution for this or ideas this could be solved
when I un-dock the panel could it interactive with other panels that may be docked and undocked.

I am using this nice example and work from previous threads . http://plnkr.co/edit/FITTtt?p=preview
where when I click on click be from undocked the number should be updated.

timilsinagd commented Sep 15, 2017

It will be greatly appreciated if some one had a solution for this or ideas this could be solved
when I un-dock the panel could it interactive with other panels that may be docked and undocked.

I am using this nice example and work from previous threads . http://plnkr.co/edit/FITTtt?p=preview
where when I click on click be from undocked the number should be updated.

@martin31821

This comment has been minimized.

Show comment
Hide comment
@martin31821

martin31821 Jun 21, 2018

To push this once again, I'm using golden layout in a large-scale angular 6 application including synchronized multi-window components. For any specific questions, feel free to contact me

martin31821 commented Jun 21, 2018

To push this once again, I'm using golden layout in a large-scale angular 6 application including synchronized multi-window components. For any specific questions, feel free to contact me

@TekSiDoT

This comment has been minimized.

Show comment
Hide comment
@TekSiDoT

TekSiDoT Jun 22, 2018

@martin31821 That application isn't open-source by any chance?

TekSiDoT commented Jun 22, 2018

@martin31821 That application isn't open-source by any chance?

@martin31821

This comment has been minimized.

Show comment
Hide comment
@martin31821

martin31821 Jun 22, 2018

Unfortunately it's not open-source at the moment, since I had to do some monkey patches within GL to get the behavior I wanted it to have, so my binding. I'm working on integrating these into goldenlayout but I can't give you an exact timeline yet.

One open sourced part is the goldsam/ng-golden-layout Library, which I updated to NG5 goldsam/ng-golden-layout#8. Maybe this helps you out.

martin31821 commented Jun 22, 2018

Unfortunately it's not open-source at the moment, since I had to do some monkey patches within GL to get the behavior I wanted it to have, so my binding. I'm working on integrating these into goldenlayout but I can't give you an exact timeline yet.

One open sourced part is the goldsam/ng-golden-layout Library, which I updated to NG5 goldsam/ng-golden-layout#8. Maybe this helps you out.

@martin31821

This comment has been minimized.

Show comment
Hide comment
@martin31821

martin31821 Jul 4, 2018

@TekSiDoT I dropped our code into a public repo: https://github.com/EmbeddedEnterprises/ng6-golden-layout

You can also install it via npm install @embedded-enterprises/ng6-golden-layout.
It should be compatible to the existing goldsam binding and ships ES2015 by default. However it is currently fixed to golden-layout 1.5.7.

martin31821 commented Jul 4, 2018

@TekSiDoT I dropped our code into a public repo: https://github.com/EmbeddedEnterprises/ng6-golden-layout

You can also install it via npm install @embedded-enterprises/ng6-golden-layout.
It should be compatible to the existing goldsam binding and ships ES2015 by default. However it is currently fixed to golden-layout 1.5.7.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment