Add to readme and add GIT url.

README.md

@@ -1,17 +1,96 @@
-# GoldenLayoutNgApp
+# NgxGoldenLayout2
 
-This application demonstrates how to use Golden Layout inside an Angular application.
+This library allows for Angular 12+ applications to easily use [Golden Layout](http://golden-layout.com/).
 
-To run the application:
-* Clone the repository into a directory on your computer.
-* From within that directory, run the script `npm run build` to build the application.
-* Run the script `npm run start` to start the application.
-* In a web browser, start the application with the URL:\
-[http://localhost:4200](http://localhost:4200).
 
-This uses a technique written up by Carlos Roso: [Angular Pro Tip: How to dynamically create components in \<body\>](https://medium.com/hackernoon/angular-pro-tip-how-to-dynamically-create-components-in-body-ba200cc289e6)
+## Why version 2?
 
-Thanks also to ttquang1063750 whose post on Stack Overflow pointed me in this direction:
-  [https://stackoverflow.com/questions/64478364/load-component-to-html-element](https://stackoverflow.com/questions/64478364/load-component-to-html-element)
+The package [ngx-golden-layout](https://www.npmjs.com/package/ngx-golden-layout) has fallen out of maintenance and is now 4 major releases behind Angular and 2 major releases behind [GoldenLayout](https://www.npmjs.com/package/golden-layout). The package is also close sourced.
+
+## Demo
+
+To see this package in action, run:
+
+> npm i && npm start
+
+## Setup
+
+1. Install this package
+
+> npm i ngx-golden-layout-2 golden-layout
+
+2. Add NgxGoldenLayout to your app module
+
+```
+@NgModule({
+  declarations: [...],
+  imports: [NgxGoldenLayoutModule.forRoot()], // Add this line
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {
+  ...
+}
+```
+
+3. Register all your Ng components with NgxGoldenLayoutModule in AppModule.
+
+```
+
+import {
+  NgxGoldenLayoutModule,
+  GoldenLayoutManagerService,
+} from "ngx-golden-layout-2";
+
+@NgModule({
+  ... 
+  imports: [NgxGoldenLayoutModule.forRoot()],
+  ...
+})
+export class AppModule {
+  constructor(private _goldenLayoutManagerService: GoldenLayoutManagerService) {
+    this._goldenLayoutManagerService.registerComponentTypes([
+      { name: TextComponent.name, componentType: TextComponent },
+      { name: ColorComponent.name, componentType: ColorComponent },
+      { name: BooleanComponent.name, componentType: BooleanComponent },
+    ]);
+  }
+}
+```
+
+4. To your AppComponent (or the component you wish to use GoldenLayout in) set the host component:
+
+```
+import {
+  GoldenLayoutHostComponent,
+  GoldenLayoutManagerService,
+} from "ngx-golden-layout-2";
+
+@Component({
+  template: `
+      <golden-layout-host #goldenLayoutHost></golden-layout-host>   
+  `,
+})
+export class AppComponent implements AfterViewInit {
+  @ViewChild("goldenLayoutHost")
+  private _goldenLayoutHostComponent: GoldenLayoutHostComponent;
+
+  constructor(
+    private _goldenLayoutManagerService: GoldenLayoutManagerService
+  ) {}
+
+  ngAfterViewInit() {
+    this._goldenLayoutManagerService.setGoldenLayoutHostComponent(
+      this._goldenLayoutHostComponent
+    );
+  }
+}
+```
+
+5. Add your components to the GoldenLayout host via...
+
+```
+
+    this._goldenLayoutManagerService.addComponent(componentType);
+```
 
-The app and the code in this repository is published under a MIT license.

projects/ngx-golden-layout-2/package.json

@@ -9,5 +9,9 @@
   },
   "dependencies": {
     "tslib": "^2.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fresto32/ngx-golden-layout-2/tree/main"
   }
 }