Merge pull request #2773 from adumesny/master

fix angular doc

Author: adumesny

angular/README.md

@@ -1,24 +1,27 @@
 # Angular wrapper
 
-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.
+The Angular [wrapper component](projects/lib/src/lib/gridstack.component.ts) <gridstack> is a <b>better way to use Gridstack</b>, 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...
 
 I.E. don't use Angular templating to create grid items as that is harder to sync when gridstack will also add/remove items.
 
-HTML 
+HTML
+
 ```html
-<gridstack [options]="gridOptions">
-</gridstack>
+<gridstack [options]="gridOptions"></gridstack>
 ```
 
 CSS
+
 ```css
 @import "gridstack/dist/gridstack.min.css";
+@import "gridstack/dist/gridstack-extra.min.css"; // if you use 2-11 column
 
 .grid-stack {
-  background: #FAFAD2;
+  background: #fafad2;
 }
 .grid-stack-item-content {
   text-align: center;
@@ -27,6 +30,7 @@ CSS
 ```
 
 in your module Code
+
 ```ts
 import { GridstackModule } from 'gridstack/dist/angular';
 
@@ -39,6 +43,7 @@ export class AppModule { }
 ```
 
 Component Code
+
 ```ts
 import { GridStackOptions } from 'gridstack';
 
@@ -54,16 +59,19 @@ public gridOptions: GridStackOptions = {
 ```
 
 # More Complete example
+
 In this example (build on previous one) will use your actual custom angular components inside each grid item (instead of dummy html content) and have per component saved settings as well (using BaseWidget).
 
-HTML 
+HTML
+
 ```html
 <gridstack [options]="gridOptions" (changeCB)="onChange($event)">
   <div empty-content>message when grid is empty</div>
 </gridstack>
 ```
 
 Code
+
 ```ts
 import { Component } from '@angular/core';
 import { GridStack, GridStackOptions } from 'gridstack';
@@ -113,18 +121,19 @@ public onChange(data: nodesCB) {
 ```
 
 # ngFor with wrapper
+
 For simple case where you control the children creation (gridstack doesn't do create or re-parenting)
 
-HTML 
+HTML
+
 ```html
 <gridstack [options]="gridOptions" (changeCB)="onChange($event)">
-  <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">
-    Item {{n.id}}
-  </gridstack-item>
+  <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n"> Item {{n.id}} </gridstack-item>
 </gridstack>
 ```
 
 Code
+
 ```javascript
 import { GridStackOptions, GridStackWidget } from 'gridstack';
 import { nodesCB } from 'gridstack/dist/angular';
@@ -149,22 +158,25 @@ public identify(index: number, w: GridStackWidget) {
 ```
 
 ## Demo
+
 You can see a fuller example at [app.component.ts](projects/demo/src/app/app.component.ts)
 
-to build the demo, go to [angular/projects/demo](projects/demo/) and run `yarn` + `yarn start` and navigate to `http://localhost:4200/` 
+to build the demo, go to [angular/projects/demo](projects/demo/) and run `yarn` + `yarn start` and navigate to `http://localhost:4200/`
 
 Code ship starting with v8.1.2+ in `dist/angular` for people to use directly and is an angular module! (source code under `dist/angular/src`)
-## Caveats 
 
- - This wrapper needs: 
-    - gridstack v8 to run as it needs the latest changes (use older version that matches GS versions)
-    - Angular 13+ for dynamic createComponent() API
+## Caveats
+
+- This wrapper needs:
+  - gridstack v8 to run as it needs the latest changes (use older version that matches GS versions)
+  - Angular 13+ for dynamic createComponent() API
+
+## ngFor Caveats
+
+- This wrapper handles well ngFor loops, but if you're using a trackBy function (as I would recommend) and no element id change after an update,
+  you must manually update the `GridstackItemComponent.option` directly - see [modifyNgFor()](./projects/demo/src/app/app.component.ts#L202) example.
+- The original client list of items is not updated to match **content** changes made by gridstack (TBD later), but adding new item or removing (as shown in demo) will update those new items. Client could use change/added/removed events to sync that list if they wish to do so.
 
- ## *ngFor Caveats
- - This wrapper handles well ngFor loops, but if you're using a trackBy function (as I would recommend) and no element id change after an update,
- you must manually update the `GridstackItemComponent.option` directly - see [modifyNgFor()](src/app/app.component.ts#L174) example.
- - The original client list of items is not updated to match **content** changes made by gridstack (TBD later), but adding new item or removing (as shown in demo) will update those new items. Client could use change/added/removed events to sync that list if they wish to do so.
+Would appreciate getting help doing the same for React and Vue (2 other popular frameworks)
 
- Would appreciate getting help doing the same for React and Vue (2 other popular frameworks)
- 
- -Alain
+-Alain