goldenlayout | The ultimate Javascript layout manager | Frontend Framework library

You need to change the id of the second map.

First of all, the value of id attribute should be unique across the whole app (well, at least unique in the output that you are currently showing to the user). Both of your maps are pointing at the same div element with id="map" (probably the first that they find).

So your first map can potentially target div with id="map1" and the second map component should target div with id="map2".

So you should try to put the map id as a prop to both of your components and set the target id and div id in render() method based on this property

Please, let me know if my answer helped you!

A similar use case:

1. User pressed a button
2. Component hides
3. User sees blank area but size in maintained.

Now I want to be able to close or hide the Component and made it reappears pushing a toolbar button (i.e. programmatically).

What I would do in this case is have a column or row with a stack inside it. Hide the stacks headers via the headerhieght itemconfig dimension setting. This stack has 2 items inside, one of which is empty. Then when the user clicks the button you set the empty item to be active. Then when you want it to reappear then just set the original to active.

The other use case is pretty simple where you are programmatically closing one and everything else around it resizes taking up the space. Bringing it back is also just adding it back in. I don't think you are referring to this one. Let me know.

Following is base use of the Redux, see if your code has all ingredients required:

Check my answer here for full details: Cannot read property 'string' of undefined | React.PropTypes | LayoutPropTypes.js

In short, as of React v15.5 React.PropTypes is deprecated. You'll need to install the prop-types package from npm.

Unless you are using Angular HttpModule to make calls, any async call made with an external library will result in running your call back out of the original scope. To mitigate this you need to assign this to a local variable the callback can use.

Seems more like a context issue to me. In the _createGrid method define the context of outer this in a variable and use that. Like

The code in the plunk is not incorrect, changing this.layout.registerComponent to this.layout.nativeElement.registerComponent is just hiding the problem and will cause more problems once the application can actually build.

Your application is running using webpack via Angular CLI whereas the application in the plunk is using SystemJS

You have ended up merging the two when trying to implement the plunk in your application and this is causing your issues. You do not need the Load libraries and configure SystemJS sections in the index.html as @yurzui mentioned and you also don't need the systemjs.config.js file