Styling Popup Text in Angular

IfThenTim

Drawing from a prior post on styling popup text, I discovered the solution did not work for me in an Angular project.

With some help, I landed on a work-around of moving some page-level CSS to global. That seems backwards from the way CSS is supposed to work in Angular. 

Specifically, I  had to move this code to global.scss to be able to change the popup text color to black.

 

 /* import ArcGIS styles required for map marker popups to display */
 @import "https://js.arcgis.com/4.22/esri/themes/light/view.css";

 /* increase contrast of popup text */
 .esri-feature-content p {
     color: black;
     }

 

Is there a better way of styling popup text in an Angular application?

AndyGup

Okay, thanks for the repo. What's going on has to do with CSS precedence and specificity, as well as Angular component life-cycle and encapsulation, so it's a little tricky. The important difference between the Angular component and the Popup is that the ArcGIS API's Popup is not a member of your Angular component when the component is initialized. Popup pulls its CSS from the ArcGIS CDN assets which are loaded after the component's CSS, and by default are pulled from here https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/light/main.css.  You can see this request in the developer console's Network tab.

There are several ways to address this issue. You identified one of them - use a global CSS to override styles. You can also host the ArcGIS assets locally and create your own custom Sass-based theme. Here are a few links:

Working with local assets

Custom CSS with Sass

Angular life-cycle hooks

Angular component styles

Did that help?