Skip to content
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

Closed
natcohen opened this issue Nov 12, 2015 · 57 comments
Closed

Angular 2.0 support #75

natcohen opened this issue Nov 12, 2015 · 57 comments

Comments

@natcohen
Copy link

@natcohen natcohen commented Nov 12, 2015

Any plan to support angular 2.0 and add a tuto?

Thanks

@WolframHempel
Copy link
Collaborator

@WolframHempel 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
Copy link
Author

@natcohen 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
Copy link

@realsaraf 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
Copy link

@realsaraf realsaraf commented Mar 21, 2016

any update on this?

@WolframHempel
Copy link
Collaborator

@WolframHempel 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
Copy link

@david-ergoss david-ergoss commented Apr 11, 2016

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

@natcohen
Copy link
Author

@natcohen natcohen commented May 17, 2016

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

@natcohen
Copy link
Author

@natcohen 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
Copy link

@david-ergoss 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
Copy link

@dgorobopec 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
Copy link

@cosminpopescu 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
Copy link
Author

@natcohen natcohen commented Aug 10, 2016

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

@dgorobopec
Copy link

@dgorobopec dgorobopec commented Aug 10, 2016

@natcohen What are your troubles ?

@natcohen
Copy link
Author

@natcohen 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
Copy link
Author

@natcohen 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
Copy link
Author

@natcohen 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
Copy link
Author

@natcohen natcohen commented Aug 19, 2016

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

@david-ergoss
Copy link

@david-ergoss 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
Copy link

@djb12 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
Copy link

@david-ergoss david-ergoss commented Sep 2, 2016

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

@natcohen
Copy link
Author

@natcohen 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
Copy link

@david-ergoss 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
Copy link
Author

@natcohen natcohen commented Sep 5, 2016

@david-ergoss Very smart, thanks!

@natcohen
Copy link
Author

@natcohen 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
Copy link
Author

@natcohen natcohen commented Sep 20, 2016

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

@FunkeyFlo
Copy link

@FunkeyFlo 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
Copy link

@marclerman 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
Copy link

@david-ergoss 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
Copy link

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

@mrsoto
Copy link

@mrsoto mrsoto commented Nov 28, 2016

@a497988
Copy link

@a497988 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?

@jmls
Copy link

@jmls 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
Copy link

@Borquaye 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
Copy link

@Abrissirba 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
Copy link

@prashantprabhakar 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
Copy link

@Borquaye 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
Copy link

@prashantprabhakar 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
Copy link

@prashantprabhakar 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
Copy link

@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

@briancullinan
Copy link

@briancullinan briancullinan 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
Copy link

@ckosmowski 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
Copy link
Collaborator

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

@briancullinan
Copy link

@briancullinan briancullinan commented Aug 1, 2017

@timilsinagd
Copy link

@timilsinagd 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
Copy link
Member

@martin31821 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
Copy link

@TekSiDoT TekSiDoT commented Jun 22, 2018

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

@martin31821
Copy link
Member

@martin31821 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
Copy link
Member

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

@allanace852
Copy link

@allanace852 allanace852 commented Nov 12, 2018

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

@megastels
Copy link

@megastels megastels commented Feb 21, 2019

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

@martin31821
Copy link
Member

@martin31821 martin31821 commented Jan 23, 2020

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

@LukeTOBrien
Copy link

@LukeTOBrien LukeTOBrien commented Jul 13, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet