Merge pull request #2329 from adumesny/master

angular wrapper - part 2

Author: adumesny

Gruntfile.js

@@ -43,10 +43,10 @@ module.exports = function(grunt) {
           'dist/es5/gridstack-poly.js': ['src/gridstack-poly.js'],
           'dist/src/gridstack.scss': ['src/gridstack.scss'],
           'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'],
-          'dist/ng/README.md': ['demo/angular/README.md'],
-          'dist/ng/src/gridstack.component.ts': ['demo/angular/src/gridstack.component.ts'],
-          'dist/ng/src/gridstack-item.component.ts': ['demo/angular/src/gridstack-item.component.ts'],
-          'dist/ng/src/gridstack.module.ts': ['demo/angular/src/gridstack.module.ts'],
+          'dist/angular/README.md': ['angular/README.md'],
+          'dist/angular/src/gridstack.component.ts': ['angular/projects/lib/src/lib/gridstack.component.ts'],
+          'dist/angular/src/gridstack-item.component.ts': ['angular/projects/lib/src/lib/gridstack-item.component.ts'],
+          'dist/angular/src/gridstack.module.ts': ['angular/projects/lib/src/lib/gridstack.module.ts'],
         }
       }
     },

README.md

@@ -147,7 +147,7 @@ GridStack no longer requires external dependencies as of v1.0.0 (lodash was remo
 
 search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...
 
-- **Angular**: we now ship out of the box with Angular wrapper components - see <a href="https://github.com/gridstack/gridstack.js/tree/master/demo/angular" target="_blank">Angular Demo</a>.
+- **Angular**: we now ship out of the box with Angular wrapper components - see <a href="https://github.com/gridstack/gridstack.js/tree/master/angular" target="_blank">Angular Component</a>.
 - **Angular9**: [lb-gridstack](https://github.com/pfms84/lb-gridstack) Note: very old v0.3 gridstack instance so recommend for **concept ONLY if you wish to use directive instead**. teh code has been vented as I use components.
 - **AngularJS**: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
 - **Ember**: [ember-gridstack](https://github.com/yahoo/ember-gridstack)

angular/README.md

@@ -1,8 +1,6 @@
 # Angular wrapper
 
-The Angular [wrapper component](src/gridstack.component.ts) <gridstack> is a better way to use Gridstack, but alternative raw [ngFor](src/app/ngFor.ts) or [simple](src/app/simple.ts) demos are also given.
-
-**NOTE:**  still having [issue](https://github.com/gridstack/gridstack.js/issues/2310) exporting the files to be included by Angular projects, so for now copy gridstack/dist/ng/src/* to your project and adjust the paths below.
+The Angular [wrapper component](projects/lib/src/lib/gridstack.component.ts) <gridstack> is a better way to use Gridstack, but alternative raw [ngFor](projects/demo/src/app/ngFor.ts) or [simple](projects/demo/src/app/simple.ts) demos are also given.
 
 # Dynamic grid items
 this is the recommended way if you are going to have multiple grids (alow drag&drop between) or drag from toolbar to create items, or drag to remove items, etc...
@@ -30,7 +28,7 @@ CSS
 
 in your module Code
 ```ts
-import { GridstackModule } from 'gridstack/dist/ng/src/gridstack.module';
+import { GridstackModule } from 'gridstack/dist/angular';
 
 @NgModule({
   imports: [GridstackModule, ...]
@@ -70,7 +68,7 @@ Code
 ```ts
 import { Component } from '@angular/core';
 import { GridStack, GridStackOptions } from 'gridstack';
-import { GridstackComponent, gsCreateNgComponents, NgGridStackWidget, nodesCB } from 'gridstack/dist/ng/gridstack.component';
+import { GridstackComponent, gsCreateNgComponents, NgGridStackWidget, nodesCB } from 'gridstack/dist/angular';
 
 // some custom components
 @Component({
@@ -126,7 +124,7 @@ HTML
 Code
 ```javascript
 import { GridStackOptions, GridStackWidget } from 'gridstack';
-import { nodesCB } from 'gridstack/dist/ng/gridstack.component';
+import { nodesCB } from 'gridstack/dist/angular';
 
 /** sample grid options and items to load... */
 public gridOptions: GridStackOptions = {
@@ -153,9 +151,9 @@ public identify(index: number, w: GridStackWidget) {
 ## Demo
 You can see a fuller example at [app.component.ts](src/app/app.component.ts)
 
-to build the demo, go to demo/angular and run `yarn` + `yarn start` and navigate to `http://localhost:4200/` 
+to build the demo, go to angular/projects/demo and run `yarn` + `yarn start` and navigate to `http://localhost:4200/` 
 
-Code now shipped starting with v8.0+ in dist/ng for people to use directly!
+Code now shipped starting with v8.1.2+ in `dist/angular` for people to use directly! (source code under `dist/angular/src`)
 ## Caveats 
 
  - This wrapper needs: 

angular/projects/demo/src/app/app.component.css

@@ -0,0 +1,11 @@
+.test-container {
+  margin-top: 30px;
+}
+button.active {
+  color: #fff;
+  background-color: #007bff;
+}
+
+.text-container {
+  display: flex;
+}