feat(marker): Add ability to specify className (close #172)

Wykks · Jul 19, 2019 · f7602c2 · f7602c2
1 parent dda802c
commit f7602c2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/projects/ngx-mapbox-gl/src/lib/marker/marker.component.spec.ts b/projects/ngx-mapbox-gl/src/lib/marker/marker.component.spec.ts
@@ -10,6 +10,7 @@ import { MarkerComponent } from './marker.component';
     <mgl-marker
       [offset]="offset"
       [lngLat]="lngLat"
+      [className]="className"
     >
       ...
     </mgl-marker>
@@ -18,6 +19,7 @@ import { MarkerComponent } from './marker.component';
 class MarkerTestComponent implements OnDestroy {
   offset: PointLike;
   lngLat: [number, number];
+  className: string;
 
   ngOnDestroy() { }
 }
@@ -64,5 +66,13 @@ describe('MarkerComponent', () => {
       fixture.destroy();
       expect(msSpy.removeMarker).toHaveBeenCalled();
     });
+
+    it('should apply classes', () => {
+      component.className = 'my-class1 my-class2';
+      fixture.detectChanges();
+      const classes = (fixture.nativeElement as HTMLElement).querySelector('mgl-marker > div')!.classList;
+      expect(classes).toContain('my-class1');
+      expect(classes).toContain('my-class2');
+    });
   });
 });
diff --git a/projects/ngx-mapbox-gl/src/lib/marker/marker.component.ts b/projects/ngx-mapbox-gl/src/lib/marker/marker.component.ts
@@ -18,7 +18,7 @@ import { MapService } from '../map/map.service';
 
 @Component({
   selector: 'mgl-marker',
-  template: '<div #content><ng-content></ng-content></div>',
+  template: '<div [class]="className" #content><ng-content></ng-content></div>',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -32,6 +32,7 @@ export class MarkerComponent implements OnChanges, OnDestroy, AfterViewInit, OnI
   @Input() lngLat?: LngLatLike;
   @Input() draggable?: boolean;
   @Input() popupShown?: boolean;
+  @Input() className: string;
 
   @Output() dragStart = new EventEmitter<Marker>();
   @Output() drag = new EventEmitter<Marker>();