Is Angular 6 with typescript the golden recipe for layout design?

I've been utilizing the golden layout in conjunction with Angular 6, following the steps outlined in this particular guide.

The issue arises when I try to execute 

GoldenLayoutModule.forRoot(config)

The error message states that 'config' is not compatible with the type parameter GoldenLayoutConfiguration. 

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

// jQuery must be global within the window object.
window['$'] = $;

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

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: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
typescriptangular6golden-layout

Answer №1

After successfully integrating golden-layout with Angular 6 by converting the javascript file from the golden-layout example to typescript, I decided to share my angular 6 files for this particular setup. This will provide others with a functional starting point and save them the time I spent figuring it out. While ng6-golden-layout should ideally be compatible with Angular 6, I faced issues with the layout config syntax and lacked access to complete working examples in my research.

To begin, you need to install the following package:

npm install --save <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="baddd5d6dedfd497d6dbc3d5cfcefa8b948f9483">[email protected]</a> jquery

The necessary files that work with Angular 6 include:

app.module.ts

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

// Ensure JQuery is globally available 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" />

Answer №2

config must be defined as type GoldenLayoutConfiguration. It seems like the issue lies in this line:

let config = {

To resolve this, consider changing it to:

let config: GoldenLayoutConfiguration = {

You can also refer to the official documentation, which provides an example like this:

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

This could be another approach you might want to consider.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to simulating Twilio with Jest and TypeScript to perform unit testing

Please assist me in mocking a Twilio service that sends messages using Jest to mock the service. Below is the code I am working with: import { SQSEvent } from "aws-lambda"; import { GetSecretValueResponse } from "aws-sdk/clients/secretsmanag ...

javascripttypescriptunit-testingjestjstwilio

Output Scalable Vector Graphics (SVG) content on a webpage

I need to include an SVG element in my Angular 2+ code. My goal is to provide users with the option to print the SVG element as it appears on the screen. <div class="floor-plan" id="printSectionId2" (drop)="onDrop($event)" (dragover)="onDragOver ...

javascripthtmlcsstypescriptsvg

Troubleshooting issue with alignment in Material UI using Typescript

<Grid item xs={12} align="center"> is causing an issue for me No overload matches this call. Overload 1 of 2, '(props: { component: ElementType<any>; } & Partial<Record<Breakpoint, boolean | GridSize>> & { ...

cssreactjstypescriptmaterial-ui

Mastering Angular: Accessing undefined properties (specifically 'push')

Currently, I am in the process of learning Angular and have encountered an issue while working on an assignment. The error message that I am facing is "Cannot read properties of undefined (reading 'push')." Despite knowing that this is a common e ...

angulartypescript

Guide to creating a function and exporting it to a component in react with the help of typescript

I have a ParentComponent where I need to integrate a function from a separate file and incorporate it into the ParentComponent. The structure of the ParentComponent is as follows: function ParentComponent() { const count = 5; // this value usually co ...

reactjstypescript

Currency Digital Style

I'm working on converting the amount retrieved from my API into a format specific to the user's locale. When using the console: Intl.NumberFormat('en-IN').format(450000) // "4,50,000" But in an Angular 2 component template: {{ Intl. ...

angulartypescript

Proper Validation in Angular6: Preventing Empty Input Fields

I've been working with Angular and grappling with the challenge of validating input fields to prevent white spaces. I decided to experiment with an IF statement, as shown below. Everything seemed to be working smoothly until I encountered an error mes ...

angulartypescript

What could be causing my TSC to constantly crash whenever I try to utilize MUI props?

Currently in the process of converting a JavaScript project using Next.js and Material UI to TypeScript. This is a snippet of code from one of my components. Whenever I include Props as an intersection type along with MUI's BoxProps, the TypeScript c ...

typescriptmaterial-uireact-typescript

Animate the opening and closing of a div element

A form is set up for editing. Within this form, there are 2 separate divs. The first div is labeled editForm, which displays the form for editing, and the second div is labeled infos, which shows the details of this form. My goal is to have the infos se ...

javascripthtmlcssangulartypescript

Enhancing React Flow to provide updated selection and hover functionality

After diving into react flow, I found it to be quite user-friendly. However, I've hit a roadblock while attempting to update the styles of a selected node. My current workaround involves using useState to modify the style object for a specific Id. Is ...

javascriptcssreactjstypescript

In Ionic 3, the term "Twilio" is not recognized

Attempting to integrate Twilio into my Ionic 3 application has been a bit of a challenge. While it works fine when tested on a browser, running it on an actual device led to a frustrating error message: TypeError: undefined is not a function {stack: (...), ...

angulartypescriptionic3twilio

Repetitive cycling through an array

My array consists of classes: const transferClasses = [ { id: "c5d91430-aaab-ed11-8daf-85953743f5cc", name: "Class1", isTransfer: false, children: [], }, { id: "775cb75d-aaab-ed11-8daf-85953743f5cc", ...

javascriptarraystypescriptrecursiontail-recursion

Ensuring correct association of values to avoid redundancies

There are 5 fields available for users to fill out on this form: Leave Code, From Date, Input Time1, To Date, and Input Time2. These variables are declared as a dates object in the .ts file, as shown below. interface Supervisor { name: string; code: s ...

javascripthtmlangulartypescript

Change the parent title attribute back to its original state

This is in contrast to queries similar to the one referenced here. In my scenario, there is a child element within a parent element (specifically a matSelect within a matCard, although that detail may not be significant) where the parent element has a set ...

htmlangulartypescriptproperty-binding

Angular File Upload Button Tutorial

English is not my first language, so please excuse any mistakes. I recently started learning Angular and I'm attempting to build a file upload button that lets users upload files based on dropdown menu options (such as USA States). Once uploaded, the ...

angulartypescriptspring-boot

Implementing circular generic in Typescript tutorial

I have a question regarding the code snippet below: interface BaseProps<TControl> { onEvent: (control: TControl) => void; } class BaseControl<TValue, BaseProps<any>> { onBlur = () => { onEvent(this); //subscriber must see ...

typescripttypescript-genericscircular-referenceself-reference

How come I am able to use array.some() but not array.every() when working with union array types?

Imagine a scenario where there is a (silly) function like this: function doSomething(input: number|string): boolean { if (input === 42 || input === '42') { return true; } else { return false; } } Question arises as to why array.som ...

arraystypescript

Is your React Native list elements feeling a little too close for comfort?

I'm facing an issue where the items in my list are not properly spaced out and I'm unable to figure out why. I have 3 elements for each letter that should be separated from each other. I suspect that the issue might be related to the fact that th ...

arraysreactjstypescriptlistreact-native

The onChange event for React input does not trigger when the value remains the same

Script: function SingleInput(props: {value: string; onChanged: (value: string) => void}) { const handleChange = useCallback( (e: React.ChangeEvent<HTMLInputElement>) => { const newValue = e.target.value; cons ...

reactjstypescripteventsinput

Angular 2 TypeScript: Accelerating the Increment Number Speed

I'm working with a function in Angular 4 that is triggered when the arrow down key is pressed. Each time the arrow down key is hit, the counter increments by 1. In this function, I need to run another function if the counter reaches a certain speed. ...

javascriptangulartypescripttime