Golden Layout with Angular 6 using typescript?

Question

I am using golden layout with Angular 6, following this tutorial.

I'm getting an error on GoldenLayoutModule.forRoot(config)

config not assignable to parameter of type GoldenLayoutConfiguration.

import { AppComponent } from './app.component';
import { GoldenLayoutModule, GoldenLayoutConfiguration } from '@embedded-enterprises/ng6-golden-layout';
import * as $ from 'jquery';

// It is required to have JQuery as global in the window object.
window['$'] = $;

// const config: GoldenLayoutConfiguration { /* TODO */ };


let config = {
  content: [{
      type: 'row',
      content:[{
          type: 'component',
          componentName: 'testComponent',
          componentState: { label: 'A' }
      },{
          type: 'column',
          content:[{
              type: 'component',
              componentName: 'testComponent',
              componentState: { label: 'B' }
          },{
              type: 'component',
              componentName: 'testComponent',
              componentState: { label: 'C' }
          }]
      }]
  }]
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoldenLayoutModule.forRoot(config)
  ],
  entryComponents: [
    // TODO Add your components which are used as panels in golden-layout also here.
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Welcome to stack overflow. The more research you do prior to asking a question, the more likely it is to be answered. You should post things you've tried, possibly including a "working" sandbox of your code. Also, the link to your tutorial is broken - it's possible it's paid access or something. Either way, no one else will know what you're referring to. As far as your question goes, the issue is config is the wrong type. It needs to be GoldenLayoutConfiguration but it doesn't appear to be that type. What type is it? — Travis Heeter
– Travis Heeter, Commented Oct 17, 2018 at 17:46
A fully functional Angular-6 implementation of golden-layout can be found at github.com/EmbeddedEnterprises/ng6-golden-layout I wish, I knew that earlier... — B--rian
– B--rian, Commented Nov 16, 2018 at 14:09

B--rian · Accepted Answer · 2018-11-16 14:59:40Z

I was able to get golden-layout to work with Angular 6 by converting the javascript file of the golden-layout example to typescript. I am including my angular 6 files for this example so that others can start with a full working example to save them the time I have spent. I am not sure why the ng6-golden-layout was not working as it should be compatible for Angular 6 but could not get the layout config syntax and could not find any full working examples in my searches.

First, a package has to be installed:

npm install --save [email protected] jquery

The files compatible to Angular 6 are the following:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import * as $ from 'jquery';

// It is required to have JQuery as global in the window object.
window['$'] = $;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  entryComponents: [
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import * as GoldenLayout from 'golden-layout';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myLayout: GoldenLayout;
  title = 'popout-ex';

  config:any = {
    content: [{
      type: 'row',
      content: [
          {
          type:'component',
          componentName: 'example',
          componentState: { text: 'Component 1' }
          },
        {
          type:'component',
          componentName: 'example',
          componentState: { text: 'Component 2' }
          },
        {
          type:'component',
          componentName: 'example',
          componentState: { text: 'Component 3' }
          }
      ]
    }]
  };

  ngOnInit() {
      this.myLayout = new GoldenLayout( this.config );

      this.myLayout.registerComponent( 'example', function( container, state ){
        container.getElement().html( '<h2>' + state.text + '</h2>');
      });

      this.myLayout.init();
    }
}

app.component.html

 <link type="text/css" rel="stylesheet" href="//golden-layout.com/assets/css/goldenlayout-base.css" />
 <link type="text/css" rel="stylesheet" href="//golden-layout.com/assets/css/goldenlayout-dark-theme.css" />

Travis Heeter · Accepted Answer · 2018-10-17 17:56:08Z

0

config needs to be of type GoldenLayoutConfiguration. It looks like this line

let config = {

is your issue. Try this:

let config:GoldenLayoutConfiguration = {

The documentation says this:

myLayout = new GoldenLayout({
  content:[{ 
    type: 'component', 
    componentName: 'sayHi',
    componentState: { name: 'Wolfram' }
  }]
});

so that's something else you can try.

answered Oct 17, 2018 at 17:56

Travis Heeter

14.2k14 gold badges99 silver badges146 bronze badges

Collectives™ on Stack Overflow

Golden Layout with Angular 6 using typescript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related