fix(core): add console error if any of column def id includes dot

- all Editors/Filters are using the column definition id to add a css className for properly identifying the this editor/filter with a unique className, however if the columnId includes a dot then that becomes 2 class names in css and will cause issues, so it's better to advise the user from the start that his column definitions has some invalid Id(s).

src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts

@@ -453,6 +453,16 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
     });
 
     describe('with editors', () => {
+      it('should display a console error when any of the column definition ids include a dot notation', () => {
+        const consoleSpy = jest.spyOn(global.console, 'error').mockReturnValue();
+        const mockColDefs = [{ id: 'user.gender', field: 'user.gender', editor: { model: Editors.text, collection: ['male', 'female'] } }] as Column[];
+
+        component.ngAfterViewInit();
+        component.columnDefinitions = mockColDefs;
+
+        expect(consoleSpy).toHaveBeenCalledWith('[Angular-Slickgrid] Make sure that none of your Column Definition "id" property includes a dot in its name because that will cause some problems with the Editors. For example if your column definition "field" property is "user.firstName" then use "firstName" as the column "id".');
+      });
+
       it('should be able to load async editors with a regular Promise', (done) => {
         const mockCollection = ['male', 'female'];
         const mockColDefs = [{ id: 'gender', field: 'gender', editor: { model: Editors.text, collectionAsync: of(mockCollection) } }] as Column[];

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -1139,6 +1139,10 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
    * then take back "editor.model" and make it the new "editor" so that SlickGrid Editor Factory still works
    */
   private swapInternalEditorToSlickGridFactoryEditor(columnDefinitions: Column[]) {
+    if (columnDefinitions.some(col => `${col.id}`.includes('.'))) {
+      console.error('[Angular-Slickgrid] Make sure that none of your Column Definition "id" property includes a dot in its name because that will cause some problems with the Editors. For example if your column definition "field" property is "user.firstName" then use "firstName" as the column "id".');
+    }
+
     return columnDefinitions.map((column: Column | any) => {
       // on every Editor that have a "collectionAsync", resolve the data and assign it to the "collection" property
       if (column && column.editor && column.editor.collectionAsync) {