Angular 2.0 support

[natcohen]

Any plan to support angular 2.0 and add a tuto?

Thanks

[WolframHempel]

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]

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]

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

[realsaraf]

any update on this?

[WolframHempel]

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]

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

[natcohen]

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

[natcohen]

@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]

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

[dgoexail]

@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]

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

[natcohen]

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

[dgoexail]

@natcohen What are your troubles ?

[natcohen]

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]

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]

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]

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

[david-ergoss]

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]

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]

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

[natcohen]

@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]

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

[natcohen]

@david-ergoss Very smart, thanks!

[natcohen]

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

[natcohen]

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

[FunkeyFlo]

@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]

@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]

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]

@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.

[mrsoto]

@WolframHempel watch this issue:
angular/angular#13035 (comment)

[a497988]

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?

[jmls]

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]

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]

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]

@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]

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]

@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]

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]

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

[ghost]

@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]

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]

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.

[ghost]

Thank you for sharing! I am thinking to implement this next. Having these links should make it easy. EDIT: needs work to get it working on Angular 4 :(

[timilsinagd]

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]

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]

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

[martin31821]

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]

@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.

[allanace852]

@martin31821 , do you know to load and execute the config on the fly(inside a particular component) and not in GoldenLayoutModule?

[megastels]

Hi.
What do you think about this?
https://stackblitz.com/edit/angular-4aughc?embed=1&file=src/app/app.component.ts

[martin31821]

Angular 6 to 8 is supported by embedding: https://github.com/EmbeddedEnterprises/ng6-golden-layout.

[LukeTOBrien]

Hi chaps,

When I was creating my Angular app I found this on StackBlitz.
@martin31821 I don't know if you have seen this before or what you think?

FYI I have also create a app using Blazor and I have Golden Layout working straight out of the box, just following your docs no fidderly needed... So you can also boast Blazor support (if you want to.)