OpenLayers Angular – How to Specify Custom CSS for an OpenLayers Zoom Control in Angular 6

angularopenlayers

I am attempting to modify the Zoom buttons on OpenLayers 5.3 in an Angular 6 component. And I'm using this OL3 question as a starting point: Creating new buttons and removing default ones – Openlayers-3.

However, my custom CSS class for my component is being ignored (or overwritten with the original ol.css for the zoom buttons).

this.map = new OlMap({
  target: 'map',
  layers: [
    new OlTileLayer({
      source: new OlOSM()
    })
  ],
  view: this.view,
  controls: [
    new OlZoom({ className: 'custom-zoom' })
  ]

And I've placed .custom-zoom and .custom-zoom button in my scss for my component, but they do not render for the Zoom buttons.

Any ideas on an Angular 6 solution to custom CSS classes for the Zoom buttons?

enter image description here

Best Answer

In Angular a style in @Component will only be applied to its own template (see https://angular.io/guide/component-styles#style-scope) You basically have two options:

  1. Overwrite the style in your global style.scss.

    .ol-control button {
    background-color: red;
}

  2. (deprecated) Use ::ng-deep in your component style.

    ::ng-deep .ol-control button {
    background-color: red;
}

For more information on the whole /deep/ deprecation see this question for example.

Related Question