![Oracle Drags Its Feet in the JavaScript Trademark Dispute](https://cdn.sanity.io/images/cgdhsj6q/production/919c3b22c24f93884c548d60cbb338e819ff2435-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
@embedded-enterprises/ng6-golden-layout
Advanced tools
[![Downloads](https://img.shields.io/npm/dm/@embedded-enterprises/ng6-golden-layout.svg)](https://www.npmjs.com/package/@embedded-enterprises/ng6-golden-layout) [![NPM Version](https://img.shields.io/npm/v/@embedded-enterprises/ng6-golden-layout.svg)](htt
This project aims to provide a complete solution for embedding golden-layout within an angular 6 application.
Thanks to the awesome people at which make testing for IE/Edge possible!
Install via npm:
$ npm install --save @embedded-enterprises/ng6-golden-layout
A manual install of package dependencies will be necessary, too
$ npm install --save golden-layout@1.5.7 jquery
$ npm install --save-dev @types/jquery
Importing and configuration:
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 */ };
@NgModule({
imports: [
//...
GoldenLayoutModule.forRoot(config),
],
declarations: [
// Add your components here
],
entryComponents: [
// TODO Add your components which are used as panels in golden-layout also here.
],
})
export class AppModule {}
In the @NgModule
decorator, under entryComponents
list all the components that should be rendered within golden layout.
Define the GoldenLayoutConfiguration
object:
components
list all components that will be rendered with golden layout.defaultLayout
construct the layout configuration as for vanilla GoldenLayout:
http://golden-layout.com/tutorials/getting-started.htmlAdd <golden-layout-root></golden-layout-root>
to your HTML.
Finally import GoldenLayout styles into styles.css
@import "~golden-layout/src/css/goldenlayout-base.css";
@import "~golden-layout/src/css/goldenlayout-light-theme.css";
body, html {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
}
After that it should work right away out of the box.
The original GoldenLayout API may be obtained through the Angular dependency injection mechanism in any of the components rendered with GoldenLayout.
import * as GoldenLayout from 'golden-layout';
import { Component, Inject } from '@angular/core';
import { GoldenLayoutContainer } from '@embedded-enterprises/ng6-golden-layout';
@Component({})
export class TestComponent {
constructor(
private goldenLayout: GoldenLayout,
@Inject(GoldenLayoutContainer) private container: GoldenLayout.Container
) { }
}
These objects can then be used to manipulate the GoldenLayout.
All services used within your app can be chosen to be either scoped to the current window (default) or to be the same instance across all windows (like a singleton).
To use services across multiple windows, you need to initialize the multi-window compatibility layer.
// in main.ts
import { MultiWindowInit } from '@embedded-enterprises/ng6-golden-layout';
// call MultiWindowInit before bootstrapModule().
MultiWindowInit();
To synchronize a service, use the @MultiWindowService()
decorator:
@MultiWindowService<YourService>()
@Injectable()
class YourService {
// implementation
}
NOTE: This only works once per service instance, it will destroy scoped services!
If you want to remove a component type, but don't want your users to clear the entire state, you can use the fallback component.
It works by creating a component, like this:
import { FailedComponent } from '@embedded-enterprises/ng6-golden-layout';
@Component({
selector: `app-invalid`,
template: `<h1>Component {{componentName}} couldn't be found`,
})
class InvalidComponent {
// The InjectionToken `FailedComponent` provides the name of the failed component.
// You can use this to implement arbitrarily complex error pages.
constructor(@Inject(FailedComponent) public componentName: string) { }
}
After that, you inject the previously created component into the GoldenLayout binding like this:
// In your main NgModule
import { FallbackComponent } from '@embedded-enterprises/ng6-golden-layout';
@NgModule({
providers: [
//...
{
provide: FallbackComponent,
useValue: InvalidComponent, // DON'T USE `useClass` or `useFactory` here!
},
],
declarations: [
//...
InvalidComponent,
],
entryComponents: [
//...
InvalidComponent,
],
})
export class MyModule { }
When you have setup this, the binding will automatically create this component whenever a panel type couldn't be found.
This binding is stable but by far not feature complete.
build.sh
or npm run build
to create the npm package and link it into the example project.Contributions are welcome!
FAQs
[![Downloads](https://img.shields.io/npm/dm/@embedded-enterprises/ng6-golden-layout.svg)](https://www.npmjs.com/package/@embedded-enterprises/ng6-golden-layout) [![NPM Version](https://img.shields.io/npm/v/@embedded-enterprises/ng6-golden-layout.svg)](htt
The npm package @embedded-enterprises/ng6-golden-layout receives a total of 2 weekly downloads. As such, @embedded-enterprises/ng6-golden-layout popularity was classified as not popular.
We found that @embedded-enterprises/ng6-golden-layout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.