feat: add configuration for container selector (sortablejsContainer),…

… implement #60

README.md

@@ -42,7 +42,12 @@ imports: [
 
 Then use `sortablejs` property on a container HTML element to tell Angular that this is a sortable container; also pass the `items` array to both `*ngFor` and `[sortablejs]` to register the changes automatically.
 
-Of you want to get the sortable instance, use `(sortablejsInit)="sortableInstance = $event"`.
+## Directive API
+
+- `sortablejs` - directive, accepts model to be auto-updated (see examples below)
+- `sortablejsContainer` - directive input, CSS selector for the sortable container, string. Mostly required for frameworks that wrap the content into the elements where it is impossible to access the real container element (e.g. @angular/material). Example: `sortablejsContainer=".mat-grid-list"`
+- `sortablejsOptions` - directive input, sortable options to pass in. Please note that in order to change the options later the whole object needs to be recreated, see below
+- `sortablejsInit` - directive output, returns the current Sortable instance. Example: `(sortablejsInit)="sortableInstance = $event"`
 
 ## Simple sortable list
 

projects/ngx-sortablejs/src/lib/sortablejs.directive.ts

@@ -16,6 +16,9 @@ export class SortablejsDirective implements OnInit, OnChanges, OnDestroy {
   @Input()
   sortablejs: SortablejsBindingTarget; // array or a FormArray
 
+  @Input()
+  sortablejsContainer: string;
+
   @Input()
   sortablejsOptions: SortablejsOptions;
 
@@ -39,11 +42,9 @@ export class SortablejsDirective implements OnInit, OnChanges, OnDestroy {
   ngOnInit() {
     if (Sortable && Sortable.create) { // Sortable does not exist in angular universal (SSR)
       if (this.runInsideAngular) {
-        this.sortablejsInit.emit(this.sortableInstance = Sortable.create(this.element.nativeElement, this.options));
+        this.create();
       } else {
-        this.zone.runOutsideAngular(() => {
-          this.sortablejsInit.emit(this.sortableInstance = Sortable.create(this.element.nativeElement, this.options));
-        });
+        this.zone.runOutsideAngular(() => this.create());
       }
     }
   }
@@ -70,6 +71,15 @@ export class SortablejsDirective implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  private create() {
+    const container = this.sortablejsContainer ? this.element.nativeElement : this.element.nativeElement.querySelector(this.sortablejsContainer);
+
+    setTimeout(() => {
+      this.sortableInstance = Sortable.create(container, this.options);
+      this.sortablejsInit.emit(this.sortableInstance);
+    }, 0);
+  }
+
   private getBindings(): SortablejsBindings {
     if (!this.sortablejs) {
       return new SortablejsBindings([]);